Flex 布局是一种 CSS3 弹性盒子布局模型，可以实现在容器中快速、灵活地对子元素进行布局和定位，特别适用于移动端和响应式设计。它的主要思想是：将容器（父元素）设置为一个弹性盒子（flex container），将子元素（flex item）设置为弹性项目（flex item），通过调整弹性项目的属性来实现灵活的布局。

Flex 布局有两个关键概念：主轴和交叉轴。主轴是弹性盒子的主要方向，可以是水平方向（row）或垂直方向（column），默认为水平方向。交叉轴则是与主轴垂直的方向，其方向由主轴方向决定。

以下是一些常用的 Flex 属性和属性值：

display: flex; 设置容器为弹性盒子。

flex-direction: row/column; 设置主轴方向为水平或垂直。

flex-wrap: nowrap/wrap/wrap-reverse; 设置是否换行，nowrap 表示不换行，wrap 表示换行，wrap-reverse 表示反向换行。

justify-content: flex-start/flex-end/center/space-between/space-around; 设置主轴上的对齐方式，flex-start 表示靠近主轴起点对齐，flex-end 表示靠近主轴终点对齐，center 表示居中对齐，space-between 表示两端对齐，space-around 表示均匀分布对齐。

align-items: flex-start/flex-end/center/baseline/stretch; 设置交叉轴上的对齐方式，flex-start 表示靠近交叉轴起点对齐，flex-end 表示靠近交叉轴终点对齐，center 表示居中对齐，baseline 表示基线对齐，stretch 表示拉伸对齐。

align-content: flex-start/flex-end/center/space-between/space-around/stretch; 设置多行项目在交叉轴上的对齐方式，flex-start 表示靠近交叉轴起点对齐，flex-end 表示靠近交叉轴终点对齐，center 表示居中对齐，space-between 表示两端对齐，space-around 表示均匀分布对齐，stretch 表示拉伸对齐。

flex-grow: 0/1; 设置弹性项目的放大比例，默认为 0，表示不放大，1 表示放大。

flex-shrink: 0/1; 设置弹性项目的缩小比例，默认为 1，表示可以缩小。