背景
flexbox布局方式旨在容器中的元素在排版,对其,剩余空间处理的问题上提供一个高效的解决方式,无论子元素的大小是已知或未知,动态或者静态。flexbox布局的思想就是通过改变子元素的长、宽、顺序来更好的利用容器的空间。
而且,相比于规则的布局方式如block,inline,flexbox布局方式对于子元素的排列方向也是任意的。
注意:flexbox布局更加适合于应用组件或者小尺寸的布局,对于大尺寸布局,grid更加适合。
一、flex容器属性
1.1 display属性
定义一个容器为flexbox布局,设置其display为flex即可。
该布局仅仅影响其直接子元素。
.container {
display: flex; /* or inline-flex */
}
注意css3的columns属性对于flex容器是没有效果的。
1.2 flex-direction属性
flexbox布局是属于单方向布局,意思即子元素的排列方向是横向或者纵向。flex-direction的作用就是这只子元素排列方向。flex-direction有四个可选值:row、row-reverse、column、column-reverse.
.container {
flex-direction: row | row-reverse | column | column-reverse;
}
row(默认值):从左到右
row-reverse:从右到左
column:从上到下
column-reverse:从下到上
1.3 flex-wrap属性
默认的情况下,flex容器会尝试把所有的直接子元素摆放在一排,但是你可以通过设置flex-wrap属性的值来改变这一 布局方式。flex-wrap有四个值:nowrap、wrap、wrap-reverse
.container{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap:该值为默认值,所有的子元素都在一行
wrap:子元素会自动向下换行
wrap-reverse:子元素会自动向上换行
1.4 flex-row属性
这个属性是flex-direction和flex-wrap的简写。
flex-flow: <‘flex-direction’> || <‘flex-wrap’>
1.5 justify-content属性
justify-content属性有五种属性:flex-start、flex-end、center、space-between、space-around、space-evenly,如果flex-direction方向为row,则这五种属性对于子元素的影响如下:
flex-start (默认): 子元素从开始位置挨着排放
flex-end: 子元素紧挨着容器最后摆放
center: 子元素在摆放在容器中间
space-between: 子元素均匀的摆放在容器; 起一个元素在起始位置, 最后一个元素在最末端。
space-around: 子元素均匀的摆在容器中,每个子元素前面的距离都是一样的,但是子元素之间的距离并不是一样,第一个和最后一个到边缘的距离只是为其他两个子元素距离的一半。
space-evenly: 所有的间距都是一样的,包括第一个和最后一个到边缘的距离。
flex-end: 子元素紧挨着容器最后摆放
center: 子元素在摆放在容器中间
space-between: 子元素均匀的摆放在容器; 起一个元素在起始位置, 最后一个元素在最末端。
space-around: 子元素均匀的摆在容器中,每个子元素前面的距离都是一样的,但是子元素之间的距离并不是一样,第一个和最后一个到边缘的距离只是为其他两个子元素距离的一半。
space-evenly: 所有的间距都是一样的,包括第一个和最后一个到边缘的距离。
如果flex-direction属性为column,属性含义相同,对应的是垂直方向布局。
1.6 align-items属性
如果flex-direction方向为row,aign-items属性为元素在垂直方向的布局方式,有五种值:flex-start、flex-end、center、stretch、baseline,这五种值对子元素的影响:
flex-start: 元素垂直方向从上开始摆放
flex-end: 元素垂直方向从下开始摆放
center: 元素垂直方向居中
baseline: 元素垂直方向以第一个元素文本为基准线摆放
stretch (default): 元素垂直方向拉伸填满容器(min-width/max-width仍然有效)
flex-end: 元素垂直方向从下开始摆放
center: 元素垂直方向居中
baseline: 元素垂直方向以第一个元素文本为基准线摆放
stretch (default): 元素垂直方向拉伸填满容器(min-width/max-width仍然有效)
如果flex-direction属性为column,则对应的为水平布局方式。
1.7 align-content属性
这个属性是对多行元素起作用的。例如换行,该元素有五个值,对子元素的影响如下图所示:
flex-start: 顶部对齐
flex-end: 底部对齐
center: 居中对齐
space-between: 均匀对齐,第一个元素在顶部,最后一个元素在底部
space-around: 垂直均匀对齐,每个元素的上下都有相同的间距
stretch (default): 元素垂直拉伸填满容器
flex-end: 底部对齐
center: 居中对齐
space-between: 均匀对齐,第一个元素在顶部,最后一个元素在底部
space-around: 垂直均匀对齐,每个元素的上下都有相同的间距
stretch (default): 元素垂直拉伸填满容器
二 子元素属性
2.1 order属性
默认情况下,flexbox里面的子元素是按照代码的顺序排列的,但是如果给子元素设置了order属性,则会按照oder大小从左往右或者从右往左排序。
具体使用方法:
.item {
order: <integer>; /* default is 0 */
}
2.2 flex-grow属性
这个属性可以让子元素在有必要的时候会自动增长。他接受一个没有单位的值作为增长的比例,他表示该子元素应该占用容器剩余空间的多少。
如果所有的子元素flex-grow设置为1,那么容器中剩余的空间会均匀的分配各所有子元素,如果其中一个子元素的flex-grow设置为2,那么flexbox布局将会试着分配给他的空间是其他子元素的两倍。
具体使用方法:
.item {
flex-grow: <number>; /* default 0 */
}
注意:只是接受非负的数字
2.3 flex-shrink属性
赋予子元素收缩的能力,类似于flex-grow
.item {
flex-shrink: <number>; /* default 1 */
}
2.4 flex-basis属性
在分配容器剩余的空间前,定义一个元素默认的尺寸。尺寸的值可以是百分数或者具体的尺寸,也可以是关键字auto,当设置为auto的时候,表示参考我的长和宽(在main-size关键字被弃用之前是参考这个值的)。当设置的关键字是content的时候,表示根据子元素的内容来设置其尺寸,但是这个关键字目前支持的不是很好。
.item {
flex-basis: <length> | auto; /* default auto */
}
如果值设置为 0, 包含内容的额外的空间不会考虑在内。 如果设为 auto, 额外的空间是一句flex-grow设置的值来分配的。
2.5 flex属性
这个属性是flex-grow、flex-shrink、flex-basis三个属性的简写,第二个和第三个值书可选的。flex默认值为0 1 auto
强烈推荐使用这个flex而不是单独设置各个不同的属性。
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
强烈推荐使用这个flex而不是单独设置各个不同的属性。
2.6 align-self属性
作用同align-items,只是这个属性是作用到子元素的,对某个子元素单独设置align属性
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注意:float,clear、vertical-align对于flex元素没有作用。
bugs:https://github.com/philipwalton/flexbugs