前端 -- Flex布局

Flex布局（Flexible Box Layout）是一种CSS布局方式，旨在提供一种更有效的方式来布局、对齐和分配容器内项目的空间，即使它们的大小未知或是动态变化的。Flex布局能够让容器的子元素能够灵活地增长和缩小以最佳地填充可用空间。

Flex容器属性

• display: 设置为 flex 或 inline-flex 以启用Flex布局。

• flex-direction: 决定主轴的方向（即项目的排列方向）。

• flex-wrap: 控制Flex容器是单行还是多行，以及如何换行。

• justify-content: 定义了项目在主轴上的对齐方式。

• align-items: 定义项目在交叉轴上如何对齐。

• align-content: 多行Flex容器中的行如何在交叉轴上对齐。

• flex-flow: 是 flex-direction 和 flex-wrap 的简写形式。

Flex项目属性

• flex-grow: 定义项目的放大比例。

• flex-shrink: 定义了项目的缩小比例。

• flex-basis: 定义了在分配多余空间之前，项目占据的主轴空间。

• flex: 是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为 0 1 auto。

• align-self: 允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。

示例

.container {

  display: flex; /* 启用Flex布局 */

  flex-direction: row; /* 项目水平排列 */

  justify-content: center; /* 在主轴上居中对齐 */

  align-items: center; /* 在交叉轴上居中对齐 */

}

.item {

  flex: 1; /* 项目将等分空间 */

}



<div class="container">

  <div class="item">1</div>

  <div class="item">2</div>

  <div class="item">3</div>

</div>

Flex布局提供了一种更加灵活和高效的方式来设计布局，特别适合于响应式设计和复杂的布局排列