CSS Flexbox 布局
Flexbox（弹性盒子布局模型）是 CSS3 中引入的一种强大的一维布局模型。它旨在提供一种更高效的方式来对容器中的项目进行对齐、分布和排序，即使它们的大小是未知或动态的。
Flexbox 是现代 CSS 布局的基石，非常适合用于构建组件级别的布局，如导航栏、卡片、表单等。
Flexbox 的核心概念
要使用 Flexbox，你首先需要一个弹性容器 (Flex Container) 和一些弹性项目 (Flex Items)。
- 弹性容器: 通过在元素上设置
display: flex;或display: inline-flex;来创建。 - 弹性项目: 弹性容器的所有直接子元素自动成为弹性项目。
Flexbox 布局有两个轴：
- 主轴 (Main Axis): 弹性项目沿着主轴排列。默认是水平方向（从左到右）。
- 交叉轴 (Cross Axis): 与主轴垂直的轴。默认是垂直方向（从上到下）。
弹性容器属性 (Properties for the Parent)
这些属性设置在弹性容器上，用于控制其内部所有项目的整体布局。
display
定义一个弹性容器。
flex: 创建一个块级的弹性容器。inline-flex: 创建一个内联的弹性容器。
flex-direction
设置主轴的方向，决定了弹性项目的排列方向。
row: (默认) 从左到右水平排列。row-reverse: 从右到左水平排列。column: 从上到下垂直排列。column-reverse: 从下到上垂直排列。
flex-wrap
控制当弹性项目在一行上放不下时是否换行。
nowrap: (默认) 不换行，项目会收缩以适应容器。wrap: 换行，从上到下。wrap-reverse: 换行，从下到上。
justify-content
定义项目在主轴上的对齐方式。
flex-start: (默认) 向主轴起点对齐。flex-end: 向主轴终点对齐。center: 居中对齐。space-between: 两端对齐，项目之间的间隔都相等。space-around: 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。space-evenly: 每个项目之间的间隔以及项目与边框之间的间隔都完全相等。
align-items
定义项目在交叉轴上的对齐方式。
stretch: (默认) 如果项目未设置高度或设为 auto，将占满整个容器的高度。flex-start: 向交叉轴起点对齐。flex-end: 向交叉轴终点对齐。center: 居中对齐。baseline: 项目的第一行文字的基线对齐。
align-content
当有多根轴线（即 flex-wrap: wrap; 导致换行）时，定义这些轴线在交叉轴上的对齐方式。如果只有一根轴线，该属性不起作用。
弹性项目属性 (Properties for the Children)
这些属性设置在弹性项目上，用于控制单个项目的行为。
order
定义项目的排列顺序。数值越小，排列越靠前。默认为 0。
.item-1 { order: 2; }
.item-2 { order: 1; }
.item-3 { order: 3; }
/* 显示顺序将是：item-2, item-1, item-3 */flex-grow
定义项目的放大比例。默认为 0，即如果存在剩余空间，也不放大。
如果所有项目的 flex-grow 都为 1，则它们将等分剩余空间。如果一个项目的 flex-grow 为 2，其他项目都为 1，则前者占据的剩余空间将比其他项多一倍。
flex-shrink
定义项目的缩小比例。默认为 1，即如果空间不足，该项目将缩小。
flex-basis
定义在分配多余空间之前，项目占据的主轴空间。可以是长度值（如 20%, 5rem 等）或 auto。
flex (简写属性)
这是 flex-grow, flex-shrink 和 flex-basis 的简写。建议使用这个属性。
flex: 0 1 auto;(默认值)flex: 1;(等同于flex: 1 1 0%) - 项目会等分空间。flex: auto;(等同于flex: 1 1 auto)flex: none;(等同于flex: 0 0 auto) - 项目不会伸缩。
align-self
允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。其值与 align-items 相同。
Flexbox 是一个功能极其丰富的模块，掌握它将极大地提升你的 CSS 布局能力。