How to use CSS Flexbox to achieve a responsive layout with a height ratio of 2:5:3?

Create a responsive layout with a height ratio of 2:5:3 using CSS Flexbox

This article describes how to use CSS Flexbox to achieve a responsive layout with always maintaining a 2:5:3 height ratio and adapt to different screen sizes. The key is to use the features of Flexbox ingeniously.

First, we set the parent container to the Flex layout and specify the vertical arrangement: display: flex; flex-direction: column; . This causes the child elements to be arranged in sequence along the vertical axis.

Next, use the flex attribute to control the height proportion of the child elements. flex: 2; , flex: 5; , flex: 3; specifies that the ratio of three child elements occupying the height of the parent container is 2:5:3. The height of the parent container will be adapted to the content, while the height of the child element will be allocated proportionally. This approach ensures that the height ratio remains consistent across screen sizes.

To make the layout fill the entire viewport height, we set the parent container height to 100% of the viewport height: height: 100vh; .

The following are CSS and HTML code examples:

CSS code:

 .container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  align-items: center; /* Optional: vertical centering*/
}

.item1 {
  flex: 2;
}

.item2 {
  flex: 5;
}

.item3 {
  flex: 3;
}

HTML code:

 


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


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

Through the above code, you can create a responsive layout with a height ratio of 2:5:3 and maintain the correct proportions for different screen sizes. align-items: center; is an optional attribute used to vertically neuter child elements, which can be added or deleted according to actual needs.

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