Flex布局全解析

一、什么是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-direction> <flex-wrap>;
  /* 示例：垂直排列且自动换行 */
  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布局无疑是现代前端开发中布局方案的首选。