Home > Article > Web Front-end > How to flexibly use CSS Flex elastic layout to realize web page layout

How to flexibly use CSS Flex elastic layout to realize web page layout

WBOYOriginal: 2023-09-26 11:57:031477browse

如何灵活运用Css Flex 弹性布局实现网页布局

CSS Flex elastic layout is a powerful web page layout technology that can help us achieve high flexibility and responsiveness style page layout. This article will introduce how to use CSS Flex elastic layout to implement web page layout, and provide specific code examples.

1. Basic concepts

Before using CSS Flex elastic layout, you need to understand some basic concepts.

Container (Container): The parent element that applies CSS Flex elastic layout, that is, the element that contains the child elements to be laid out.
Item: The child element in the container, that is, the element to be laid out.
Main Axis: The default horizontal direction, which is the direction in which items are arranged.
Cross Axis: The direction perpendicular to the main axis.

2. Usage method

Set the display property of the container to flex to enable flexible layout.

.container {
  display: flex;
}

Set the flex property of the item to adjust the width ratio of the item. The flex property is an abbreviation for three values, representing flex-grow, flex-shrink and flex-basis. Among them, flex-grow represents the enlargement ratio of the item, and the default is 0; flex-shrink represents the shrinkage ratio of the item, and the default is 1; flex-basis represents the initial size of the item, and the default is auto.

.item {
  flex: 1; /* 项目的宽度将平均分配，即每个项目占据相同的空间 */
}

.item {
  flex: 2; /* 第一个项目占据2份空间，其他项目各占据1份空间 */
}

Set the flex-direction property of the container to control the arrangement direction of items. The default is row, which means horizontal arrangement; set to column, which means vertical arrangement.

.container {
  flex-direction: row; /* 默认值，水平排列 */
}

.container {
  flex-direction: column; /* 垂直排列 */
}

Set the container's justify-content property to adjust the alignment of the item on the main axis.

.container {
  justify-content: flex-start; /* 默认值，左对齐 */
}

.container {
  justify-content: flex-end; /* 右对齐 */
}

.container {
  justify-content: center; /* 居中对齐 */
}

.container {
  justify-content: space-between; /* 两端对齐，项目之间的间距相等 */
}

.container {
  justify-content: space-around; /* 项目两侧的间距是相邻项间距的一半 */
}

Set the align-items property of the container to adjust the alignment of the items on the cross axis.

.container {
  align-items: flex-start; /* 顶部对齐 */
}

.container {
  align-items: flex-end; /* 底部对齐 */
}

.container {
  align-items: center; /* 居中对齐 */
}

.container {
  align-items: stretch; /* 默认值，拉伸填充容器 */
}

Set the align-content property of the container to adjust the alignment of multi-line items on the cross axis.

.container {
  align-content: flex-start; /* 顶部对齐 */
}

.container {
  align-content: flex-end; /* 底部对齐 */
}

.container {
  align-content: center; /* 居中对齐 */
}

.container {
  align-content: space-between; /* 两端对齐，项目之间的间距相等 */
}

.container {
  align-content: space-around; /* 项目两侧的间距是相邻项间距的一半 */
}

.container {
  align-content: stretch; /* 默认值，拉伸填充容器 */
}

3. Code Example

The following is a simple web page layout example, implemented using CSS Flex elastic layout.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #f2f2f2;
      }

      .item {
        flex: 1;
        text-align: center;
        padding: 20px;
        background-color: #ccc;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
    </div>
  </body>
</html>

The above code sets the container to be arranged horizontally, with equal spacing between items, items centered on the cross axis, and a background color of light gray. Each item has the same width and text content is centered inside the item.

Summary:

Using CSS Flex elastic layout can quickly and flexibly implement web page layout. By setting container and item properties, you can control the arrangement and alignment of items on the main and cross axes. At the same time, the width ratio of the item can be adjusted by setting the flex property of the item. The above is a simple example. By flexibly using CSS Flex elastic layout, more complex web page layout can be achieved. Hope this article is helpful to you.

The above is the detailed content of How to flexibly use CSS Flex elastic layout to realize web page layout. For more information, please follow other related articles on the PHP Chinese website!

css auto display column flex

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use CSS Positions layout to achieve waterfall flow effect on web pagesNext article：How to use CSS Positions layout to achieve waterfall flow effect on web pages

See more

How to flexibly use CSS Flex elastic layout to realize web page layout

Related articles