How to implement two-column layout through CSS Flex layout-CSS Tutorial-php.cn

How to implement two-column layout through CSS Flex layout

PHPz

Release： 2023-09-26 10:54:37

Original

1591 people have browsed it

如何通过Css Flex 弹性布局实现两栏布局

How to implement two-column layout through CSS Flex elastic layout

CSS Flex elastic layout is a modern layout technology that can simplify the process of web page layout and make the design and developers can easily create layouts that are flexible and adaptable to a variety of screen sizes. Among them, implementing a two-column layout is one of the common requirements in Flex layout. In this article, we will introduce how to use CSS Flex elastic layout to implement a simple two-column layout and provide specific code examples.

Using Flex Containers and Items

When using Flex layout, we need a parent container to wrap our layout content. This container is called a Flex container. Flex containers can be created by setting the display property to "flex" or "inline-flex". Specifically, we can create a Flex container through the following code:

<div class="container">
  <!-- 布局的内容 -->
</div>

Copy after login

Next, we need to create two children in the Flex container, which is our two-column layout. These subprojects are called Flex projects. In the Flex container, we can control the size and elasticity of each item by setting the flex property to "1" or other values. Specifically, we can create two Flex projects through the following code:

<div class="container">
  <div class="item">
    <!-- 左栏内容 -->
  </div>
  <div class="item">
    <!-- 右栏内容 -->
  </div>
</div>

Copy after login

Set Flex Layout

In order to achieve a two-column layout, we need to set the relevant properties of the Flex container and project. First, we need to arrange the children in the Flex container horizontally. This can be achieved by setting the flex-direction property of the container to "row". Specifically, we can set the properties of the Flex container through the following code:

.container {
  display: flex;
  flex-direction: row;
}

Copy after login

Next, we can control the space occupied by each item by setting the flex property of the item. Here, we can use relative units, such as "fr" (short for fractional flex-grow property), to determine the proportion occupied by the children. Specifically, we can set the properties of Flex items through the following code:

.item {
  flex: 1;
}

Copy after login

Here, we use flex: 1 to set the space occupied by each item to an equal proportion. If we want the left column to take up more space, we can adjust the flex value of the corresponding item. For example, for the left column, we can set the flex property to "2", and for the right column, we can set the flex property to "1".

Full code example

The following is a complete code example that shows how to use CSS Flex elastic layout to implement a simple two-column layout:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      flex-direction: row;
    }
    
    .item {
      flex: 1;
      padding: 20px;
    }
    
    .left {
      background-color: #f1f1f1;
    }
    
    .right {
      background-color: #dddddd;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item left">
      <!-- 左栏内容 -->
    </div>
    <div class="item right">
      <!-- 右栏内容 -->
    </div>
  </div>
</body>
</html>

Copy after login

In this example , we used a simple CSS style to set the background color of each item to distinguish the left and right columns. You can add additional styles to beautify your layout according to your needs.

Summary

By using CSS Flex elastic layout, we can easily implement a two-column layout. Simply set the display property of the Flex container to "flex", then set the flex-direction property to "row", and then set the flex property of the Flex item to the corresponding value to achieve a flexible and adaptive layout. The above is a simple example, you can adjust the code according to your needs and design. I hope this article will help you understand and use CSS Flex elastic layout!

The above is the detailed content of How to implement two-column layout through CSS Flex layout. For more information, please follow other related articles on the PHP Chinese website!