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布局后,子元素的floatclearvertical-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-flowflex-directionflex-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

flexflex-growflex-shrinkflex-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-contentalign-items是最常用的对齐属性;
  • 项目的flex属性可快速控制其伸缩行为,建议优先使用;
  • 灵活运用flex-wrapalign-content处理多轴线布局。

通过组合这些属性,你可以轻松实现从简单居中到复杂响应式布局的各种需求,Flex布局无疑是现代前端开发中布局方案的首选。

posted @ 2025-07-23 19:41  韩熙隐ario  阅读(144)  评论(0)    收藏  举报