
详解flex布局设计
Flex布局
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.row{
display: flex;
}
注意,设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start
,结束位置叫做main end
;交叉轴的开始位置叫做cross start
,结束位置叫做cross end
。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size
,占据的交叉轴空间叫做cross size
。
Flex属性介绍
1. flex-direction属性
flex-direction
属性决定主轴的方向(即元素的排列方向)。
取值:flex-direction: row | row-reverse | column | column-reverse;
1.1 flex-direction:row
(默认,即主轴为水平方向,起点在左端。)
1.2 flex-direction:row-reverse
主轴为水平方向,起点在右端。
1.3 flex-direction:row-column
主轴为垂直方向,起点在上方。
1.4 flex-direction:column-reverse
主轴为垂直方向,起点在下方。
2. flex-wrap
属性
默认情况下,元素都排在一条线(又称"轴线")上。
flex-wrap
属性决定主轴如何换行。
取值:flex-wrap: nowrap | wrap | wrap-reverse;
2.1 flex-wrap:nowrap
(默认,即不会自动换行。)
Tips:第四个元素没有换行,已经溢出父元素。
2.2 flex-wrap:wrap
(元素撑满后自动换行。)
Tips:第四个元素自动换行。flex-wrap:wrap-reverse
为自动换行,但第一行会在下面,对比flex-wrap:wrap
有反效果。
3. justify-content
属性
justify-content
属性定义了元素在主轴上的对齐方式。
取值:justify-content: flex-start | flex-end | center | space-between | space-around;
3.1 justify-content:flex-start
(默认,即左对齐。)
3.2 justify-content:flex-end
(右对齐。)
3.3 justify-content:center
(居中对齐。)
3.3 justify-content:between
(两端对齐,元素之间的间隔都相等。)
3.4 justify-content:around
(每个元素两侧的间隔相等。)
4. align-items
属性
align-items
属性定义了元素在交叉轴上如何对齐。
取值:align-items: flex-start | flex-end | center | baseline | stretch;
4.1 align-items:flex-start
(交叉轴的起点对齐,即上方。)
flex-item2
flex-item3
flex-item3
4.2 align-items:flex-end
(交叉轴的终点对齐,即下方。)
flex-item2
flex-item3
flex-item3
4.3 align-items:flex-center
(交叉轴的中点对齐。)
flex-item2
flex-item3
flex-item3
4.4 align-items:flex-baseline
(元素第一行文字的基线对齐。)
flex-item2
flex-item3
flex-item3
4.5 align-items:flex-stretch
(默认值,如果元素未设置高度或设为auto,将占满整个容器的高度。)
flex-item2
flex-item3
flex-item3
5. align-content
属性
align-content
属性定义了多根轴线的对齐方式。如果元素只有一根轴线,该属性不起作用
取值:align-content: flex-start | flex-end | center | space-between | space-around | stretch;
5.1 align-content:flex-start
(与交叉轴的起点对齐。)
5.2 align-content:flex-end
(与交叉轴的终点对齐。)
5.3 align-content:center
(与交叉轴的中点对齐。)
5.4 align-content:space-between
(与交叉轴两端对齐,轴线之间的间隔平均分布。)
5.5 align-content:space-around
(每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。)
5.6 align-content:stretch
(轴线占满整个交叉轴。)
通过下面的例子,你可以尝试更改样式以查看效果。