How to achieve adaptive height layout with 2:5:3 scale using CSS Flexbox?

Easily build adaptive and highly layouts with 2:5:3 scale with CSS Flexbox

This article describes how to use the CSS elastic box model (Flexbox) to create a container with the precise height proportion of the three child elements inside it being 2:5:3, and can be automatically adjusted according to the screen size, always maintaining the proportion and filling the parent container height.

We need a container containing three child elements, and the height ratio of these three child elements must be maintained at 2:5:3, and can be perfectly adapted at various screen resolutions. Flexbox layouts can easily achieve this.

The key is to set display: flex and flex-direction: column properties of the parent container, which makes the child elements arranged vertically. Then, use the flex attribute to set the proportion of space occupied by each child element: flex: 2 , flex: 5 , and flex: 3 respectively representing the child element occupying 2 parts, 5 parts and 3 parts of the height of the parent container. The parent container height is automatically adjusted according to the content to ensure that the child elements are proportional correctly and adaptive. For vertical centering, we used align-items: center .

The following code snippet demonstrates the implementation:

 .container {
  display: flex;
  flex-direction: column;
  align-items: center; /* vertical center*/
  height: 100vh; /* It occupies full viewport height, can be modified according to actual conditions*/
}

.item1 {
  flex: 2;
}

.item2 {
  flex: 5;
}

.item3 {
  flex: 3;
}

To show the effect more intuitively, we provide a complete HTML example:

 


  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Layout</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>

This code creates a highly adaptive layout with a ratio of 2:5:3. The parent container height is set to 100vh so that it occupies the viewport height, which you can adjust according to actual needs.

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