网页布局,是css的一个重要应用。
传统的网页布局,主要是基于盒模型,和display、position、float属性,这些属性的一个优势就是简单,容易理解,但也有一些不方便的地方,比如在实现垂直居中的时候。
2009年,W3C提出了一种新的解决方案:Flex(Flexible Box,弹性布局)布局。
设置为flex布局的容器称为flex容器,flex容器的子元素称为容器项目(flex item)。
将元素设置为flex布局后,子元素的float、clear、vertical-align属性将失效。
Flex布局的一些基本概念
Flex容器默认有两根轴,水平的主轴(main axis)和垂直的交叉轴(cross asix)。主轴的开始位置叫做main start,主轴的结束位置叫做main end。交叉轴的开始位置叫做cross axis,交叉轴的结束位置叫做cross end。
容器项目默认沿主轴排列,单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
Flex容器的一些属性
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
1.flex-direction:容器的方向
有4个值:
row(默认值):主轴为水平方向,起点在左侧
row-reverse:主轴为水平方向,起点在右侧
column:主轴为垂直方向,起点在顶部
column-reverse:主轴为垂直方向,起点在底部
2.flex-wrap:项目排列
有3个值:
nowrap(默认):不换行
wrap:换行,第一行结束后,另起一行开始排列
wrap-reverse:换行,第一行结束后在上面一行开始排列
3.flex-flow:flex-direction和flex-wrap的简写形式,默认值为row nowrap
.ele{flex-flow:<flex-direction>||<flex-wrap>}
取值请看例子:
.container{
flex-flow:row nowrap;
}
4.justify-content:项目在主轴上的对齐方式
有5个值:
flex-start(默认):左对齐
flex-end:右对齐
center:居中
space-between:两端对齐,项目之间的间隔相等
space-around:每个项目两侧的间隔相等。项目之间的间隔比项目与边框的间隔大一倍
5.align-items:项目在交叉轴上的对齐方式
有5个值,与交叉轴的方向有关,具体如下:
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline:项目的第一行文字的基线对齐
stretch(默认值):如果项目未定义或height为auto,将占满整个容器的高度
6.aglin-content:多根轴线的对齐方式,如果只有一根轴线,该属性不起作用
.box{ align-content: flex-start || flex-end || center || space-between || space-around || stretch; }
有6个值:
flex-start:与交叉轴的起点对齐
flex-end:与交叉轴的终点对齐
center:与交叉轴的中点对齐
space-between:与交叉轴的两端对齐,轴线之间的间隔平均分布
space-around:每根轴线两侧的间隔都相等。轴线之间的间隔比轴线与边框之间的间隔大一倍
stretch(默认值):轴线占满整个交叉轴
项目的属性
项目可以设置以下这些属性:
order
flex-grow
flex-shrink
flex-basis
flex
align-self
1.order:项目的排列顺序。数值越小,排序越靠前,默认为0
.item { order: <integer>; }
2.flex-grow:定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
.item { flex-grow: <number>; /*default 0*/ }
如果所有项目的flex-grow都为1,则它们将等分剩余空间。如果一个项目的flex-grow为2,其他项目的flex-grow为1,那么前者将占有的剩余空间比后者多一倍。
3.flex-shrink:定义项目的缩小比例,默认为1,即如果空间不足,该项目将被缩小。
.item { flex-shrink: <number>; /*default 1*/ }
如果所有项目的flex-shrink都为1,当空间不足时,都将等比例缩小。但是如果一个项目的flex-shrink为0,其他项目的flex-shrink为1,那么当空间不足时,前者不缩小,后者则将等比例缩小。
属性值不能为负值。
4.flex-basis:在定义剩余空间之前,项目占据的主轴的空间。浏览器根据这个属性,计算主轴是否有剩余空间,它的默认值为auto,即项目的本来大小。
.item { flex-basis: <length> || auto; /*default auto*/ }
5.flex:flex-grow、flex-shrink、flex-basis的简写,默认为0 1 auto,后两个属性为可选属性。
flex属性有两个快捷值:auto(1 1 auto)、none(0,0,auto)。
建议使用简写方式。
6.align-self:允许单个项目有与其他项目不一样的对齐方式,可以覆盖align-items属性,默认值为auto,表示继承父元素的align-items属性,如果没有父元素,等同于stretch。
.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
该属性可以取6个值,除了auto以外,其他都与align-items完全相同。
分享自:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
来源:http://www.cnblogs.com/yansj1997/p/5482811.html