How to implement a custom height layout with 2:5:3 scale and adapt to different resolutions using CSS Flexbox?

CSS Flexbox implements adaptive highly proportional layout

This article describes how to use CSS Flexbox to create a layout with a height ratio of 2:5:3 and keep it consistent at different resolutions. This layout is very practical in web design and allows flexible allocation of the height of the page content block.

The core technology is the Flexbox elastic box model of CSS. By setting display: flex attribute of the parent container and flex attribute of the child element, you can easily control the height proportion of the child element.

First, set the parent container style so that it becomes a Flex container:

 .container {
  display: flex;
  flex-direction: column; /* Vertical arrangement of child elements*/
  height: 100vh; /* Occupy viewport height*/
  align-items: stretch; /* child elements support the parent container width*/
}

flex-direction: column; Ensure that the child elements are arranged vertically; height: 100vh; align-items: stretch; Ensure that the child elements are full of the parent container.

Then, set the flex attribute of the child element to define the height scale:

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

flex: 2; , flex: 5; , flex: 3; respectively defines the height ratio of the three child elements to be 2:5:3. Flexbox automatically allocates available space based on this scale.

Here is a complete HTML example:

 


  <title>Flexbox Height Ratio</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>

Through this method, the height ratio of the three sub-elements is always maintained at 2:5:3 regardless of the size of the browser window changes, achieving a perfect adaptive layout.

The above is the detailed content of How to implement a custom height layout with 2:5:3 scale and adapt to different resolutions using CSS Flexbox?. For more information, please follow other related articles on the PHP Chinese website!