flex 布局总结表

Flex（Flexible Box）布局是 CSS 中用于创建响应式布局的布局模型，能够在容器中灵活地排列、对齐和分布元素。以下是对 Flex 布局的详解总结。

基本概念

1. Flex 容器（Flex Container）：设定了 display: flex 或 display: inline-flex 的容器。
2. Flex 项目（Flex Item）：容器内的直接子元素，即被 Flex 布局控制的元素。

主轴和交叉轴

• 主轴（Main Axis）：项目排列的方向，默认是水平（row）。
• 交叉轴（Cross Axis）：垂直于主轴的方向，默认是垂直方向。

可以通过 flex-direction 控制主轴的方向和布局。

容器属性

属性	作用	取值
flex-direction	定义主轴方向（项目排列方向）。	row（默认，水平从左到右）、row-reverse、column（垂直从上到下）、column-reverse
flex-wrap	规定项目是否换行。	nowrap（默认，不换行）、wrap（换行）、wrap-reverse（换行，反向）
flex-flow	flex-direction 和 flex-wrap 的简写。	如 row wrap
justify-content	定义主轴上项目的对齐方式。	flex-start（默认，左对齐）、flex-end（右对齐）、center、space-between、space-around
align-items	定义交叉轴上项目的对齐方式。	stretch（默认，填充容器高度）、flex-start、flex-end、center、baseline（基线对齐）
align-content	多行对齐方式，适用于多行时的交叉轴对齐。	stretch、flex-start、flex-end、center、space-between、space-around

项目属性

属性	作用	取值
order	定义项目的排列顺序，数值越小，排列越靠前，默认值为 0。	整数值
flex-grow	定义项目的放大比例，容器有剩余空间时按比例分配。	非负数，默认值为 0（不放大）
flex-shrink	定义项目的缩小比例，容器空间不足时按比例缩小。	非负数，默认值为 1（允许缩小）
flex-basis	在分配多余空间之前定义项目的初始大小。	auto（默认），或指定值（如 50%）
flex	flex-grow、flex-shrink、flex-basis 的简写。	如 flex: 1 表示 flex-grow: 1; flex-shrink: 1; flex-basis: 0
align-self	允许单个项目与交叉轴对齐方式不同，覆盖 align-items 设置。	auto（默认），flex-start、flex-end、center、baseline、stretch

常用布局示例

1. 水平居中对齐

   .container {
     display: flex;
     justify-content: center;
     align-items: center;
   }
   

2. 间距平均分布

   .container {
     display: flex;
     justify-content: space-between;
   }
   

3. 垂直居中

   .container {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
   }
   

4. 多列响应式布局

   .container {
     display: flex;
     flex-wrap: wrap;
   }
   .item {
     flex: 1 1 30%; /* 项目初始宽度为30%，可以缩放 */
     margin: 10px;
   }