一、什么是Flex布局
Flex 即 Flexible Box,意为 “弹性布局”,用来提升盒状模型的灵活性。
任何一个块元素都可以指定为Flex布局
.block {
display: flex
}
同样,行内元素也可以指定为Flex布局
.inline-block {
display: inline-flex
}
注:Flex 布局内子元素的float
、clear
、vertical-align
属性都会失效。
二、基本概念
采用Flex布局的元素称为Flex Container,它的所有子元素自动成为Flex Item
如上图所示,Flex容器存在两个轴:水平的主轴(main axis),垂直的交叉轴(cross axis)。
容器内的项默认沿着主轴排列,单个项占据的主轴空间叫做 main size,占据的交叉轴空间叫做 cross size。
三、Flex容器的属性
flex-direction
flex-direction
决定主轴的方向
.block {
flex-direction: row | row-reverse | column | column-reverse
}
flex-wrap
默认情况下,容器内子元素都排列在一条轴线上,flex-wrap
属性定义当一条轴线排列不下时,如何进行换行。
.block-box{
flex-wrap: nowrap | wrap | wrap-reverse
}
其中:
-
nowrap
表示不换行(默认) -
wrap
表示换行,依次排列 -
wrap-reverse
表示换行并翻转
flex-flow
flex-flow
是flex-direction
和flex-wrap
属性的简写,默认值为row nowrap
.block-box{
flex-flow: <flex-direction> || <flex-wrap>
}
justify-content
justify-content
定义元素在主轴上的对齐方式
.block-box {
justify-content: flex-start | flex-end | center | space-between | space-around
}
如上图所示,其取值共有五个,假设flex-direction: row
flex-start
左对齐(默认)
flex-end
右对齐
center
居中
space-between
两端对齐,项目之间间隔相等
space-around
项目左右间距相等
align-items
align-items
定义元素在交叉轴上的对齐方式
.block-box {
align-items: flex-start | flex-end | center | baseline | stretch
}
如上图所示,该属性的可能取值有5中,假设flex-direction: column
flex-start
上对齐
flex-end
下对齐
center
居中
baseline
与第一行文字基线对齐
stretch
子元素占满容器(默认)
align-content
align-content
属性定义多根轴线的对齐方式。(只有一根轴线时,无效)
.block-box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
如上图所示,该属性有6个可能取值:
flex-start
交叉轴起点对齐
flex-end
交叉轴终点对齐
center
交叉轴中点对齐
space-between
两端对齐,轴线之间间隔相等
space-around
轴线左右间距相等
stretch
轴线占满整个交叉轴(默认)
四、Flex项的属性
order
order
定义子项的排列顺序,从小达到排列,默认值0
.inline-item {
order: <integer>
}
flex-grow
flex-grow
定义子项放大的比例,默认为0,即不放大
.inline-item {
flex-grow: <integer>
}
注:如果所有子项的flex-grow
都设置为1,则等分剩余空间。如果一个子项的值设置为2,其他的为1,则前者占据的剩余空间是其他子项的一倍。
flex-shrink
flex-shrink
定义子项缩小的比例,默认为1,即当空间不足时,将子项缩小
.inline-item {
flex-shrink: <integer>
}
flex-basis
flex-basis
定义在分配多余空间之前,子项占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。默认值为auto
,即项目本身的大小。
.inline-item {
flex-basis: <length> | auto
}
注:可以将其值设置为width
或者height
属性一样的值(如100px),则子项将占据固定空间。
flex
flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
。后两个属性可选。
.inline-item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
注:建议优先使用该属性,而不是单独写三个分离的属性。
align-self
align-self
属性允许单个项目有余其他项目不一样的对齐方式,可以覆盖align-items
属性。默认值为auto
,表示继承align-items
属性。
.inline-item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
该属性可能取6个值,除了auto
,其他都与align-items
属性完全一致。