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布局无疑是现代前端开发中布局方案的首选。