一、什么是Flex布局？
Flex（Flexible Box的缩写）即“弹性布局”，是W3C在2009年提出的一种新布局模型，旨在为盒状模型提供最大的灵活性。它可以简便、完整、响应式地实现各种页面布局，目前已得到所有主流浏览器的支持（Chrome 21+、Firefox 22+、Safari 6.1+、IE 10+等）。
任何容器都能指定为Flex布局：display: flex;
行内元素可使用行内Flex布局：display: inline-flex;
Webkit内核浏览器需加前缀：display: -webkit-flex;
注意：设置为Flex布局后，子元素的float、clear和vertical-align属性将失效。
二、Flex布局的核心概念
概念
定义
Flex容器（flex container）
采用Flex布局的元素，通过display: flex声明
Flex项目（flex item）
容器的子元素，自动成为Flex项目
主轴（main axis）
容器默认的水平轴，项目默认沿主轴排列
交叉轴（cross axis）
垂直于主轴的轴，与主轴垂直相交
main size
单个项目占据的主轴空间
cross size
单个项目占据的交叉轴空间
容器存在两根默认轴线：水平的主轴（main axis）和垂直的交叉轴（cross axis），项目的排列、对齐等操作均围绕这两根轴展开。
三、容器的6个核心属性
容器属性决定了项目的整体排列方式、对齐方式等宏观布局特征，以下是6个核心属性的详细说明：
3.1 决定排列方向：flex-direction
该属性定义主轴的方向，即项目的排列方向，取值如下：
属性值
说明
row（默认）
主轴水平，起点在左端（从左到右排列）
row-reverse
主轴水平，起点在右端（从右到左排列）
column
主轴垂直，起点在上沿（从上到下排列）
column-reverse
主轴垂直，起点在下沿（从下到上排列）
.box {
flex-direction: row; /* 默认值 */
}
3.2 控制换行方式：flex-wrap
默认情况下，项目会排在一条轴线上，该属性定义轴线排不下时的换行规则：
属性值
说明
nowrap（默认）
不换行，项目可能被压缩
wrap
换行，第一行在上方
wrap-reverse
换行，第一行在下方
.box {
flex-wrap: wrap; /* 自动换行，第一行在上 */
}
3.3 简写属性：flex-flow
flex-flow是flex-direction和flex-wrap的简写形式，默认值为row nowrap。
.box {
flex-flow:
/* 示例：垂直排列且自动换行 */
flex-flow: column wrap;
}
3.4 主轴对齐：justify-content
定义项目在主轴上的对齐方式，假设主轴为水平方向（左到右）：
属性值
说明
flex-start（默认）
左对齐
flex-end
右对齐
center
居中对齐
space-between
两端对齐，项目间间隔相等
space-around
每个项目两侧间隔相等（项目间间隔是项目与边框间隔的2倍）
.box {
justify-content: center; /* 项目在主轴上居中 */
}
3.5 交叉轴对齐：align-items
定义项目在交叉轴上的对齐方式，假设交叉轴为垂直方向（从上到下）：
属性值
说明
stretch（默认）
项目未设高度时，占满容器高度
flex-start
交叉轴起点对齐（顶部对齐）
flex-end
交叉轴终点对齐（底部对齐）
center
交叉轴中点对齐（垂直居中）
baseline
项目第一行文字的基线对齐
.box {
align-items: center; /* 项目在交叉轴上居中 */
}
3.6 多轴线对齐：align-content
当项目有多根轴线（即设置了换行）时，定义轴线在交叉轴上的对齐方式（单根轴线时无效）：
属性值
说明
stretch（默认）
轴线占满整个交叉轴
flex-start
与交叉轴起点对齐
flex-end
与交叉轴终点对齐
center
与交叉轴中点对齐
space-between
与交叉轴两端对齐，轴线间间隔相等
space-around
每根轴线两侧间隔相等（轴线间间隔是轴线与边框间隔的2倍）
.box {
align-content: space-between; /* 多轴线两端对齐，间隔相等 */
}
四、项目的6个核心属性
项目属性用于控制单个项目的排列顺序、尺寸伸缩等个性化特征：
4.1 排列顺序：order
定义项目的排列顺序，数值越小越靠前，默认值为0。
.item {
order: -1; /* 数值小于0，排在默认项目之前 */
}
4.2 放大比例：flex-grow
定义项目的放大比例，默认值为0（即使有剩余空间也不放大）。
若所有项目的flex-grow都为1，则等分剩余空间；
若一个项目为2，其他为1，则前者占据的剩余空间是其他项目的2倍。
.item {
flex-grow: 2; /* 放大比例为2 */
}
4.3 缩小比例：flex-shrink
定义项目的缩小比例，默认值为1（空间不足时缩小）。
若所有项目的flex-shrink都为1，空间不足时等比例缩小；
若一个项目为0，其他为1，空间不足时前者不缩小。
负值对该属性无效。
.item {
flex-shrink: 0; /* 空间不足时不缩小 */
}
4.4 基准尺寸：flex-basis
定义项目在分配多余空间前占据的主轴空间，默认值为auto（项目本来大小），可设为与width/height类似的值（如300px）。
.item {
flex-basis: 200px; /* 项目在主轴上占据200px空间 */
}
4.5 简写属性：flex
flex是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto，有两个快捷值：
auto：等同于1 1 auto（可放大可缩小）；
none：等同于0 0 auto（不放大不缩小）。
建议优先使用该简写属性，浏览器会自动推算相关值。
.item {
flex: 1; /* 等同于 flex-grow:1, flex-shrink:1, flex-basis:0% */
}
4.6 单独对齐：align-self
允许单个项目覆盖容器的align-items属性，默认值为auto（继承父元素的align-items），其他取值与align-items一致。
.item {
align-self: flex-end; /* 该项目在交叉轴上终点对齐，覆盖容器设置 */
}
五、Flex布局核心要点总结
Flex布局的核心在于通过容器和项目的属性控制，实现灵活的弹性布局。容器属性决定整体排列框架（方向、换行、对齐），项目属性则控制个体特征（顺序、伸缩、单独对齐）。
掌握主轴与交叉轴的概念是理解对齐方式的关键；
容器的justify-content和align-items是最常用的对齐属性；
项目的flex属性可快速控制其伸缩行为，建议优先使用；
灵活运用flex-wrap和align-content处理多轴线布局。
通过组合这些属性，你可以轻松实现从简单居中到复杂响应式布局的各种需求，Flex布局无疑是现代前端开发中布局方案的首选。