2 : 5 : 3 스케일로 사용자 정의 높이 레이아웃을 구현하고 CSS Flexbox를 사용하여 다른 해상도에 적응하는 방법은 무엇입니까?

CSS Flexbox는 적응 형 균형 비례 레이아웃을 구현합니다

이 기사에서는 CSS Flexbox를 사용하여 높이 비율이 2 : 5 : 3 인 레이아웃을 만들고 다른 해상도에서 일관성을 유지하는 방법에 대해 설명합니다. 이 레이아웃은 웹 디자인에서 매우 실용적이며 페이지 컨텐츠 블록의 높이를 유연하게 할당 할 수 있습니다.

핵심 기술은 CSS의 Flexbox Elastic Box 모델입니다. display: flex 속성 및 하위 요소의 flex 속성 속성을 확인하면 자식 요소의 높이 비율을 쉽게 제어 할 수 있습니다.

먼저, 부모 컨테이너 스타일을 Flex 컨테이너가되도록 설정하십시오.

 .Container {
  디스플레이 : Flex;
  플렉스 방향 : 열; /* 아동 요소의 수직 배열*/
  높이 : 100VH; /* 뷰포트 높이 점유*/
  정렬 구조 : 스트레치; /* 자식 요소는 부모 컨테이너 너비를 지원합니다*/
}

flex-direction: column; 어린이 요소가 수직으로 배열되어 있는지 확인하십시오. height: 100vh; align-items: stretch; 어린이 요소에 부모 컨테이너가 가득한 지 확인하십시오.

그런 다음 하위 요소의 flex 속성을 설정하여 높이 스케일을 정의하십시오.

 .box1 {flex : 2; }
.box2 {flex : 5; }
.box3 {flex : 3; }

flex: 2; , flex: 5; , flex: 3; 각각 세 아동 요소의 높이 비율을 2 : 5 : 3으로 정의합니다. Flexbox는이 규모에 따라 사용 가능한 공간을 자동으로 할당합니다.

다음은 완전한 HTML 예입니다.

 


  <title>Flexbox 높이 비율</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      height: 100vh;
      align-items: stretch;
    }
    .box1 { flex: 2; background-color: lightpink; }
    .box2 { flex: 5; background-color: lightblue; }
    .box3 { flex: 3; background-color: lightgreen; }
  </style>


  <div class="container">
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
  </div>

이 방법을 통해 브라우저 창의 크기에 관계없이 세 가지 하위 요소의 높이 비율은 항상 2 : 5 : 3으로 유지되므로 완벽한 적응 형 레이아웃을 달성합니다.

위 내용은 2 : 5 : 3 스케일로 사용자 정의 높이 레이아웃을 구현하고 CSS Flexbox를 사용하여 다른 해상도에 적응하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!