弹性盒子

flex布局

介绍

1. 容器默认存在两根轴:横轴和纵轴
2. 采用flex布局的元素,称为flex容器,简称”容器”。它的所有子元素称为flex项目
3. 要设为flex布局,必须先设置display:flex

容器的属性

注意!!important!!
	:)  当将flex-direction设为column值时,align-items作用于横轴,justify-content作用于纵轴
1. flex-direction
:) 规定容器中的项目是按行排列还是按列排列
序号 属性值 说明
1 row 默认值。按行排列,起点在左端
2 row-reverse 按行排列,起点在右端
3 column 按列排列,起点在上端
4 column-reverse 按列排列,起点在下端
2. justify-content
:) 定义了项目在“横轴”上的对齐方式(横轴是相对概念)
序号 取值 说明
1 flex-start 默认值,从左向右依次排列(左对齐,与最左边无空隙)
2 flext-end 右对齐,从右向左一次排列
3 center 居中
4 space-around 每个项目两侧的间隔相等,项目之间也有间隔。项目之间的间隔比两侧的间隔大一倍
5 space-between 两端对齐(左右都不留间隙),项目之间的距离相等
3. align-items
:) 定义了项目在“纵轴”上的对齐方式(纵轴是相对概念)
序号 取值 描述
1 flex-start 从纵轴的最上方起点处排列对齐
2 flex-end 从纵轴的最下方终点处排列对齐
3 center 以纵轴的中心对齐
4 baseline 所有项目的第一行文字的基线对齐
5 stretch 默认值,如果项目未设置高度或者设为auto,每个项目将占满整个容器

弹性盒子_第1张图片

4. flex-wrap
:) 规定项目排列是否换行
序号 取值 描述
1 nowrap 默认取值,不换行,所有项目排在一行
2 wrap 换行,第一行在最上方
3 wrap-reverse 换行,第一行在最下方
5. flex-flow:flex-direction flex-wrap
6. aling-content
:) 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。这里的多根轴线代表项目既按横轴排列,又按纵轴排列(即不设置flex-direction)
序号 取值 描述
1 flex-start 与交叉轴的起点对齐
2 flex-end 以交叉轴的终点对齐
3 center 以交叉轴的中心对齐
4 space-between 与交叉轴两端对齐,即距离最底端无距离,轴线之间间隔平均分配
5 space-around 每根轴线两侧的间隔相等(距离最底端有距离),但轴线之间的间隔比轴线与边框的间隔大一倍
6 strech 轴线沾满整个交叉轴,即所有项目将整个纵轴均分

弹性盒子_第2张图片
弹性盒子_第3张图片

order
order属性定义项目的排列顺序。数值越小,排列越靠前。默认为0。
flex-grow
1. flex-grow属性定义了项目的放大比例。默认为0。即如果存在剩余空间,也不放大。
2. 如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。
3. 如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。

文章借鉴于http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

你可能感兴趣的:(学习)