CSS Flexbox를 사용하여 2 : 5 : 3 스케일로 적응력 높이 레이아웃을 달성하는 방법?

CSS Flexbox로 2 : 5 : 3 스케일로 적응 형 및 높은 레이아웃을 쉽게 구축합니다.

이 기사에서는 CSS Elastic Box 모델 (Flexbox)을 사용하여 내부의 3 개의 자식 요소의 정확한 높이가 2 : 5 : 3 인 컨테이너를 만드는 방법에 대해 설명하며 화면 크기에 따라 자동으로 조정할 수 있으며 항상 비율을 유지하고 모 컨테이너 높이를 채울 수 있습니다.

우리는 3 개의 아동 요소를 포함하는 컨테이너가 필요하며,이 세 가지 어린이 요소의 높이 비율은 2 : 5 : 3에 유지되어야하며 다양한 화면 해상도에 완벽하게 조정할 수 있습니다. Flexbox 레이아웃은 쉽게이를 달성 할 수 있습니다.

열쇠는 display: flex and flex-direction: column 특성으로 인해 어린이 요소가 수직으로 배열됩니다. 그런 다음 flex 속성을 사용하여 각 어린이 요소가 차지하는 공간의 비율을 설정하십시오 : flex: 2 , flex: 5 및 flex: 3 각각 2 개의 부품, 5 부 및 3 개의 부품 및 3 개의 부품이 부모 컨테이너 높이를 나타냅니다. 부모 컨테이너 높이는 컨텐츠에 따라 자동으로 조정되어 자식 요소가 정확하고 적응력이 비례합니다. 수직 센터링을 위해 align-items: center .

다음 코드 스 니펫은 구현을 보여줍니다.

 .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>
    .container {
      height: 100vh;
      width: 100px;
      background: #000;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .item1 {
      flex: 2;
      background: pink;
    }

    .item2 {
      flex: 5;
      background-color: blue;
    }

    .item3 {
      flex: 3;
      background-color: cadetblue;
    }
  </style>


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

이 코드는 비율이 2 : 5 : 3의 고도로 적응 형 레이아웃을 만듭니다. 모 컨테이너 높이는 100vh 로 설정되어 뷰포트 높이를 차지할 수 있도록 실제 요구에 따라 조정할 수 있습니다.

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