1.前言
传统的布局(layout)多是基于盒模型,采用display+position+float设置。
2009年W3C提出flex布局,可以简便、完整、响应式地完成各种页面布局,flex布局也得到所有浏览器的支持。
2.介绍
flex即“弹性布局”(Flexible Box),可以为盒模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
.box{
display: flex;
}
注意,设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
3.属性
- 1.在父容器添加
display:flex;
- 2.再设置
justify-content: center;
实现水平居中; - 3.最后设置
align-items: center;
实现垂直居中;
3.1 justify-content属性
justify-content
定义了item在主轴上的对齐方式。它可以取五个值,分别是:
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- 1.flex-start(默认值):左对齐
2.flex-end:右对齐
3.center: 居中
- 4.space-between:两端对齐,项目之间的间隔都相等。
- 5.space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
3.2 align-items属性
align-items
属性定义项目在交叉轴上如何对齐。它有五个属性:
.box {
align-items: flex-start | flex-end | center | baseline | stretch;
}
- 1.flex-start:交叉轴的起点对齐。
- 2.flex-end:交叉轴的终点对齐。
- 3.center:交叉轴的中点对齐。
- 4.baseline: 项目的第一行文字的基线对齐。
- 5.stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
4.属性
容器可以设置6个属性:
- 1. flex-direction
- 2. flex-wrap
- 3. flex-flow
- 4. justify-content
- 5. align-items
- 6. align-content
justify-content
和align-items
上文介绍过,下面介绍剩下的4个属性。
4.1 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
- 1.row(默认值):主轴为水平方向,起点在左端。
- 2.row-reverse:主轴为水平方向,起点在右端。
- 3.column:主轴为垂直方向,起点在上沿。
- 4.column-reverse:主轴为垂直方向,起点在下沿。
4.2 flex-wrap属性
flex-wrap
定义换行标准。
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
- 1.nowrap(默认):不换行。
- 2.wrap:换行,第一行在上方。
- 3.wrap-reverse:换行,第一行在下方。
4.3 flex-flow属性
5. 子容器
flex属性是flew-group
、flew-shrink
和flex-basis
的缩写,默认值是0, 1, auto
。后两个属性可选。
5.1 flew-group属性
flex-grow属性定义item
的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item { flex: 1}
当flex: 3
时会占据flex: 1
的三倍空间。
5.2 flew-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
5.3 flew-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。