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