flex
大约 11 分钟约 3351 字...
基础概念
flex
容器:采用flex
布局的元素,称为flex
容器flex
项目:flex
容器的所有子元素自动成为容器成员,称为flex
项目- 容器默认存在两根轴:水平的主轴
main axis
和垂直的交叉轴cross axis
- 项目默认沿主轴排列

容器的属性
display
决定了是否使用 flex
布局
display:flex
将对象作为弹性伸缩盒显示
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
diisplay:inline-flex
将对象作为内联块级弹性伸缩盒显示
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: inline-flex;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
flex-direction
决定主轴的方向(即项目的排列方向)
row
(默认值)主轴为水平方向,起点在左端
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
flex-direction: row;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
row-reverse
主轴为水平方向,起点在右端
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
flex-direction: row-reverse;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
column
主轴为垂直方向,起点在上沿
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
flex-direction: column;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
column-reverse
主轴为垂直方向,起点在下沿
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
flex-direction: column-reverse;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
flex-wrap
默认情况下,项目都排在一条轴线上,flex-wrap
属性定义,如一果条轴线排不下,如何换行
nowrap
(默认值) 不换行
如果项目的宽度加和超过容器的宽度会自动压缩每个项目的宽度
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
flex-wrap: nowrap;
background-color: #f1f1f1;
width: 180px;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
wrap
换行 第一行在上方
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
background-color: #f1f1f1;
width: 180px;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
wrap-reverse
换行 第一行在下方
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
flex-wrap: wrap-reverse;
background-color: #f1f1f1;
width: 180px;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
flex-flow
flex-direction
属性和 flex-wrap
属性的简写形式,默认值为 row nowrap
justify-content
定义了项目在主轴上的对齐方式
flex-start
(默认值) 左对齐
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
justify-content: flex-start;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
flex-end
右对齐
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
justify-content: flex-end;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
center
居中
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
justify-content: center;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
space-between
两端对齐,项目之间的间隔都相等
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
justify-content: space-between;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
space-around
每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
.container {
display: flex;
justify-content: space-around;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
height: 50px;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
align-items
定义项目在交叉轴上如何对齐
stretch
(默认值):如果Flex
项目未设置交叉轴方向的大小,将占满整个容器交叉轴方向的大小
<div class="container">
<div class="box">1</div>
<div class="box box-height">2</div>
<div class="box box-height">3</div>
<div class="box ">4</div>
</div>
.container {
display: flex;
align-items: stretch;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.box-height {
height: 100px;
line-height: 100px;
}
flex-start
交叉轴的起点对齐
<div class="container">
<div class="box box-height">1</div>
<div class="box">2</div>
<div class="box box-height">3</div>
<div class="box ">4</div>
</div>
.container {
display: flex;
align-items: flex-start;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.box-height {
height: 100px;
line-height: 100px;
}
flex-end
交叉轴的终点对齐
<div class="container">
<div class="box box-height">1</div>
<div class="box">2</div>
<div class="box box-height">3</div>
<div class="box ">4</div>
</div>
.container {
display: flex;
align-items: flex-end;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.box-height {
height: 100px;
line-height: 100px;
}
center
交叉轴的中点对齐(垂直居中)
<div class="container">
<div class="box box-height">1</div>
<div class="box">2</div>
<div class="box box-height">3</div>
<div class="box ">4</div>
</div>
.container {
display: flex;
align-items: center;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.box-height {
height: 100px;
line-height: 100px;
}
baseline
项目的第一行文字的基线对齐
<div class="container">
<div class="box box-height">1</div>
<div class="box">2</div>
<div class="box box-height">3</div>
<div class="box ">4</div>
</div>
.container {
display: flex;
align-items: baseline;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
text-decoration: underline red;
}
.box-height {
font-size: 15px;
height: 100px;
line-height: 100px;
}
align-content
定义了存在多根主轴线时,flex
项目在交叉轴上的对齐方式
如果项目只有一根主轴线 ,该属性不起作用
stretch
(默认值) 主轴线平分 Flex 容器交叉轴方向上的空间- 和
align-item
一样,如果Flex
项目未设置交叉轴方向的大小或设为auto
,将占满整个容器交叉轴方向的大小
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
background-color: #f1f1f1;
width: 200px;
height: 300px;
}
.box {
background-color: #7ea5ff;
width: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
flex-start
交叉轴的起点对齐
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
background-color: #f1f1f1;
width: 200px;
height: 300px;
align-content: flex-start;
}
.box {
background-color: #7ea5ff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
flex-end
交叉轴的终点对齐
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
background-color: #f1f1f1;
width: 200px;
height: 300px;
align-content: flex-end;
}
.box {
background-color: #7ea5ff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
center
与交叉轴的中点对齐
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
background-color: #f1f1f1;
width: 200px;
height: 300px;
align-content: center;
}
.box {
background-color: #7ea5ff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
- space-between 与交叉轴的两端对齐,轴线之间的间隔平均分布
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
background-color: #f1f1f1;
width: 200px;
height: 300px;
align-content: space-between;
}
.box {
background-color: #7ea5ff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
- space-around 每根轴线两侧的间隔都相等,所以轴线之间的间隔比轴线与边框大一倍
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
flex-wrap: wrap;
background-color: #f1f1f1;
width: 200px;
height: 300px;
align-content: space-around;
}
.box {
background-color: #7ea5ff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
项目的属性
order
属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
background-color: #f1f1f1;
}
.box {
background-color: #7ea5ff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.container .box:nth-child(3) {
order: -1;
}
flex-grow
- 属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
- 如果所有项目的
flex-grow
属性都为 1,则它们将等分主轴剩余空间(如果有的话)。如果一个项目的flex-grow
属性为 2,其他项目都为 1,则前者占据的主轴剩余空间将是其他项的 2 倍。
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
background-color: #f1f1f1;
width: 400px;
}
.box {
background-color: #7ea5ff;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.container .box:nth-child(3) {
flex-grow: 1;
}
- 如果有的项目有
flex-grow
属性,有的项目没有flex-grow
属性,但有width
属性,有flex-grow
属性的项目将等分主轴剩余空间
<div class="container">
<div class="boX">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
background-color: #f1f1f1;
width: 400px;
}
.box {
background-color: #7ea5ff;
flex-grow: 1;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.boX {
background-color: #7ea5ff;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
- 如果所有项目的
flex-shrink
属性都为 1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink
属性为 0,其他项目都为 1,则空间不足时,前者不缩小。 - 负值对该属性无效。
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>
.container {
display: flex;
background-color: #f1f1f1;
width: 200px;
}
.box {
background-color: #7ea5ff;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
font-size: 40px;
}
.container .box:nth-child(3) {
flex-shrink: 0;
}
flex-basis
- 优先级高于
width
(或height
) - 属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为
auto
,即项目的本来大小。
flex
属性是 flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为 0 1 auto
。后两个属性可选。
关键字值
单值语法
- 一个无单位数(number),会被当作
flex:number 1 0
;flex:1
; 平分剩余空间
- 一个有效的宽度
width
值,它会被当作flex-basis
的值(会被当作flex:1 1 width
) - 关键字
none
,auto
或initial
flex: auto
; 元素会根据自身的宽度与高度来确定尺寸,但是会伸长并吸收 flex 容器中额外的自由空间,也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto
"flex: initial
;元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器,但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto
"flex: none
; 元素会根据自身宽高来设置尺寸。它是完全非弹性的:既不会缩短,也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto
"
双值语法
第一个值必须为一个无单位数,并且它会被当作 flex-grow
的值。第二个值必须为以下之一:
- 一个无单位数:它会被当作
flex-shrink
的值 - 一个有效的宽度值: 它会被当作
flex-basis
的值
三值语法
- 第一个值必须为一个无单位数,并且它会被当作
flex-grow
的值 - 第二个值必须为一个无单位数,并且它会被当作
flex-shrink
的值。 - 第三个值必须为一个有效的宽度值, 并且它会被当作
flex-basis
的值
align-self
属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items
属性。默认值为 auto
,表示继承父元素的 align-items
属性。
- 该属性可能取 6 个值,除了
auto
,其他都与align-items
属性完全一致。