Flex布局（flexbox）是CSS3中新增的一种布局模式，它可以帮助我们更容易地实现页面布局，特别是在需要处理排列、对齐和分布空间等问题上非常有用。以下是一些Flex布局的常用技巧和说明：
- 父容器设置display: flex，子元素即可成为flex item，而且默认为flex-direction: row。
- 父容器设置flex-wrap: wrap可以实现flex item的自动换行，而且flex-flow: row wrap可以用于同时设置flex-direction和flex-wrap，方便快捷。
- 可以使用justify-content和align-items来实现flex item在主轴和交叉轴上的对齐方式，其中justify-content包括了flex-start、flex-end、center、space-between、space-around等选项，而align-items包括了flex-start、flex-end、center、baseline、stretch等选项。
- 可以通过flex-grow、flex-shrink和flex-basis来控制flex item的占据空间、收缩和基准值，其中flex-basis默认为auto，即根据元素的宽度或高度自动计算大小，而flex-grow和flex-shrink默认为0，不占据多余空间也不收缩空间。而且可以方便地使用flex来快速设置这些属性的组合，如flex: 1 0 auto可以等同于flex-grow: 1; flex-shrink: 0; flex-basis: auto;
- 可以使用order属性来改变flex item的显示顺序，order的值越小，越靠前。使用order的注意点是，它只改变了显示顺序，并没有改变元素在文档流中的位置。所以需要注意对其他元素的影响。
- 对于某个特定的flex item，可以使用align-self来覆盖父容器的align-items设置，以实现个性化对齐。
- 除了上述常用的flex属性外，还有一些其他的配合使用的小技巧，如flex-flow: row wrap; justify-content: space-between; align-items: center;可以实现等宽的多行项目，并且在每行内部分布均匀，而且每行与每行之间的距离也相等。
- 容器属性：
- display: flex;（设置为Flex布局）
- flex-direction: row/column;（指定主轴方向）
- justify-content: center/flex-start/flex-end/space-between/space-around;（主轴上的对齐方式）
- align-items: center/flex-start/flex-end/stretch;（交叉轴上的对齐方式）
- 项目属性：
- flex-grow: 1;（项目的放大比例）
- flex-shrink: 1;（项目的缩小比例）
- flex-basis: auto;（项目的基准大小）
- flex: none/auto/;（以上三个属性的缩写）
- align-self: center/flex-start/flex-end/stretch;（单个项目在交叉轴上的对齐方式）
- 注意事项：
- Flex布局只适用于容器内部的项目，不会影响容器外部的布局。
- 项目的顺序可以通过flex-order属性来控制。
- 可以通过嵌套多个Flex容器来实现更复杂的布局。
- Flex布局可以和其他布局模式结合使用，如Grid布局、Position布局等。
- display: flex; 设置容器为Flex布局。
- justify-content: center; 设置容器内元素在水平方向上居中对齐。
- align-items: center; 设置容器内元素在垂直方向上居中对齐。
- flex-direction: row | column; 设置容器内元素排列方向，row为水平方向，column为垂直方向。
- flex-wrap: wrap; 设置容器内元素换行，当元素数量超过容器宽度时自动换行。
- flex: 1; 设置容器内元素的占比，1为等分容器大小。
- align-self: center; 设置单独一个元素在垂直方向上居中对齐。
- order: 1; 设置单独一个元素的显示顺序，数值越小，显示越靠前。
- flex-grow: 1; 设置单独一个元素在剩余空间中占据的比例。
- flex-shrink: 0; 设置单独一个元素在空间不足时缩小的比例。
- display: flex; 用于指定一个容器是Flex容器。
- flex-direction: row/column/row-reverse/column-reverse; 用于指定Flex容器内子元素的排列方向，默认是row。
- justify-content: flex-start/flex-end/center/space-between/space-around/space-evenly; 用于指定Flex容器内子元素在主轴方向上的对齐方式。
- align-items: flex-start/flex-end/center/stretch/baseline; 用于指定Flex容器内子元素在侧轴方向上的对齐方式，默认是stretch。
- flex-wrap: nowrap/wrap/wrap-reverse; 用于指定Flex容器内子元素是否换行，默认是nowrap。
- align-content: flex-start/flex-end/center/space-between/space-around/stretch; 用于指定多行子元素在侧轴方向上的对齐方式。
- flex-grow: number; 定义子元素在分配空间时的放大比例，默认为0。
- flex-shrink: number; 定义子元素在空间不足时的缩小比例，默认为1。
- flex-basis: length/initial/auto; 定义子元素在分配空间之前设置初始大小，默认为auto。
- flex: flex-grow flex-shrink flex-basis; 综合定义子元素的放大缩小比例和初始大小。
以上是一些常见的Flex布局属性，在实际开发中还有其他属性，需要根据具体需求灵活使用。