CSS Flexbox를 사용하여 높이 비율이 2 : 5 : 3의 반응 형 레이아웃을 달성하는 방법?

CSS Flexbox를 사용하여 높이 비율 2 : 5 : 3의 응답 형 레이아웃 생성

이 기사에서는 CSS Flexbox를 사용하여 항상 2 : 5 : 3 높이 비율을 유지하고 다른 화면 크기에 적응하는 반응 레이아웃을 달성하는 방법에 대해 설명합니다. 핵심은 Flexbox의 기능을 독창적으로 사용하는 것입니다.

먼저 부모 컨테이너를 플렉스 레이아웃으로 설정하고 수직 배열을 지정합니다. display: flex; flex-direction: column; . 이로 인해 어린이 요소가 수직 축을 따라 순서대로 배열됩니다.

다음으로 flex 속성을 사용하여 자식 요소의 높이 비율을 제어하십시오. flex: 2; , flex: 5; , flex: 3; 모 컨테이너의 높이를 차지하는 3 개의 아동 요소의 비율이 2 : 5 : 3임을 지정합니다. 부모 컨테이너의 높이는 내용에 적합한 반면, 자식 요소의 높이는 비례 적으로 할당됩니다. 이 접근법은 높이 비율이 화면 크기에 따라 일관성을 유지하도록합니다.

레이아웃이 전체 뷰포트 높이를 채우기 위해 부모 컨테이너 높이를 뷰포트 높이의 100%로 설정합니다 : height: 100vh; .

다음은 CSS 및 HTML 코드 예제입니다.

CSS 코드 :

 .Container {
  디스플레이 : Flex;
  플렉스 방향 : 열;
  높이 : 100VH;
  정렬 구조 : 센터; /* 선택 사항 : 수직 센터링*/
}

.item1 {
  플렉스 : 2;
}

.item2 {
  플렉스 : 5;
}

.item3 {
  플렉스 : 3;
}

HTML 코드 :

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox 레이아웃</title>
  <style>
    /* CSS 代码同上 */
  </style>


  <div class="container">
    <div class="item1"></div>
    <div class="item2"></div>
    <div class="item3"></div>
  </div>

위의 코드를 통해 높이 비율이 2 : 5 : 3의 응답 형 레이아웃을 만들고 다른 화면 크기에 대한 올바른 비율을 유지할 수 있습니다. align-items: center; 실제 요구에 따라 추가 또는 삭제할 수있는 수직 중성 아동 요소에 사용되는 선택적 속성입니다.

위 내용은 CSS Flexbox를 사용하여 높이 비율이 2 : 5 : 3의 반응 형 레이아웃을 달성하는 방법?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!