CSS Flexbox를 사용하여 이미지와 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까?

CSS Flexbox 응답 형 레이아웃 : 이미지와 텍스트의 완벽한 조합

다양한 화면 크기를 처리하기 위해 적응 형 웹 레이아웃을 구축하는 것이 중요합니다. 이 기사는 CSS Flexbox를 사용하여 일반적인 레이아웃 요구 사항을 달성하는 방법을 보여줍니다. 왼쪽의 고정 크기 사진 및 오른쪽의 적응 형 텍스트 콘텐츠. 와이드 스크린 장치에서 텍스트는 나머지 공간을 차지합니다. 좁은 화면 장치 (예 : 휴대폰)에서 이미지가 텍스트 위에 표시됩니다.

도전 : 화면 크기의 적응 형 레이아웃 구현

대상 : Flexbox 레이아웃을 사용하여 왼쪽에 200x200 픽셀 이미지를 표시하고 오른쪽에 텍스트를 표시하십시오. 큰 화면에서 텍스트는 나머지 공간을 채 웁니다. 작은 화면 아래에서 그림은 텍스트 위에 있습니다.

이전 시도 (예 : ChatGpt에 의해 생성 된 코드)에는 문제가있을 수 있습니다. 레이아웃은 똑같이 스케일링되어 화면 크기에 따라 동적으로 조정할 수 없습니다.

솔루션 : 뷰포트 메타 데이터 및 미디어 쿼리를 영리하게 사용합니다

핵심은 다음과 같습니다. 뷰포트 메타 데이터 및 미디어 쿼리를 추가하십시오.

먼저, HTML에서 뷰포트 메타 데이터를 부분적으로 추가하십시오.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

이 코드 라인은 브라우저에 페이지 너비가 장치 너비와 일치해야하며 초기 스케일링 비율이 1.0이어서 반응 형 효과를 보장합니다.

둘째, CSS 코드를 조정하고 미디어 쿼리를 사용하여 다른 화면 크기에서 레이아웃을 제어하십시오.

 .Container {
  디스플레이 : Flex;
}

.Image {
  너비 : 200px;
  높이 : 200px;
}

.텍스트 {
  플렉스 : 1; /* 나머지 공간을 차지하십시오*/
}

@Media (max-width : 600px) { /* 작은 화면 장치의 경우* /
  .Container {
    플렉스 방향 : 열; /* 레이아웃을 수직으로 변경*/
  }
  .텍스트 {
    플렉스 : 초기; /* 텍스트 너비를 조정하려면 Flex 속성을 취소*/
  }
}

HTML 구조 예 :

<div class="container">
  <div class="image">그림</div>
  <div class="text">텍스트 내용</div>
</div>

위의 조정을 통해 화면 너비에 따라 레이아웃이 동적으로 변경됩니다. 큰 화면에서 그림과 텍스트는 수평으로 배열됩니다. 작은 화면 아래에서 그림은 텍스트 위에 있으며 다른 장치에 완벽하게 조정됩니다.

위 내용은 CSS Flexbox를 사용하여 이미지와 텍스트의 반응 형 레이아웃을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!