CSS Flex布局

CSS Flex布局，简写为CSS Flex或Flexbox，是CSS3中新的布局模式，用于在容器中更有效地分布和排列项目。Flex布局相比于传统的基于盒模型的布局，具有更加直观、灵活、自适应的特点。

Flex布局属性

Flex布局的核心属性包括：

• display：设置容器为flex布局，属性值为flex或inline-flex。
• flex-direction：设置项目在容器中的排列方向，属性值包括row（默认值，从左到右）、column（从上到下）、row-reverse（从右到左）以及column-reverse（从下到上）。
• flex-wrap：设置项目在容器中的是否换行显示，属性值包括nowrap（默认值，不换行）、wrap（可换行）、wrap-reverse（可换行，但反向）。
• justify-content：设置项目在主轴上的布局方式，属性值包括flex-start（默认值，起点对齐）、flex-end（终点对齐）、center（居中对齐）、space-between（项目间隔平均分布）、space-around（项目四周间隔平均分布）。
• align-items：设置项目在交叉轴上的对齐方式，属性值包括flex-start（交叉轴起点对齐）、flex-end（交叉轴终点对齐）、center（交叉轴居中对齐）、stretch（默认值，交叉轴充满容器高度）、baseline（基线对齐）。
• align-content：设置容器内多行项目在交叉轴上的对齐方式，属性值包括flex-start（交叉轴起点对齐）、flex-end（交叉轴终点对齐）、center（交叉轴居中对齐）、stretch（默认值，交叉轴充满容器高度）、space-between（项目间隔平均分布）、space-around（项目四周间隔平均分布）。

Flex布局实例

<div class="flex-container">
  <div class="flex-item item-1">Item 1</div>
  <div class="flex-item item-2">Item 2</div>
  <div class="flex-item item-3">Item 3</div>
</div>

.flex-container {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.flex-item {
  width: 100px;
  height: 100px;
  background-color: green;
  color: white;
  text-align: center;
  line-height: 100px;
}

上述代码实现了3个宽高都为100px、背景色为绿色、文字为白色、居中显示的盒子的布局，效果如下图所示：

Flex布局实现过程

• 首先需要给容器设置flex布局，即设置display: flex;。
• 然后设定主轴的排列方向和是否换行，即flex-direction和flex-wrap属性。
• 接着设置主轴上项目的对齐方式，即justify-content属性。
• 最后设置交叉轴上项目的对齐方式，即align-items属性。

除此之外，还可以使用flex-grow、flex-shrink、flex-basis、order等属性，来更加灵活地控制项目的大小和顺序。

以上是CSS Flex布局的简要介绍，详情可以参考MDN文档。