flex布局
- 父元素开启Flex布局的元素叫 flex container,一般我们用display:flex或者display:inline-flex开启布局。display:flex默认采用的是水平方向排布从左到右。
- flex container里面的直接子元素叫做flex items。
flex-decoration
属性值:
row(默认值) : 按行排列 主轴从左到右
row-reverse 按行排列 主轴从右到左
column: 按列排列 主轴 从上到下
column-reverse 按列排列 主轴从下到上
Justify-content
justify-content 决定了flex items 在main axis (主轴)上的对齐方式
flex-start(默认值):与main start对齐
flex-end: 与main end 对齐
center:居中对齐
space-between:
-
flex items之间的距离相等
-
与main start、 main -end两端对齐。
space-evenly:
flex items 之间的距离相等。
- flex items 与main -start、 main-end之间的距离等于flex items之间的距离
space-around:
- flex items之间的距离相等
space-around:
-
flex items之间的距离相等。
-
flex items 与 main start、main end之间的距离是flex items之间距离的一半。
align-items
决定flex-items在交叉轴上的对齐方式。默认情况下,flex-items在同一行进行显示,有可能会对对象进行压缩,但是不会进行换行。
**normal:**在弹性布局中,效果和stretch一样。
stretch:当flex items在across axis方向的size为auto时,会自动拉伸至填充flex container.
**flex-start:**与across start对齐。
flex-end:与acrossend对齐。
center:居中对齐。
**baseline:**与基准线对齐。
flex-wrap
决定flex contanier是单行还是多行
flex-wrap:nowrap(默认值,单行,不会换行)
flex-wrap:wrap(换行,多行)
align-content
决定多行flex-items在交叉轴上面的对齐方式,用法与justify-content相似。
**normal:**在弹性布局中,效果和stretch一样。
stretch:当flex items在across axis方向的size为auto时,会自动拉伸至填充flex container.
**flex-start:**与across start对齐。
flex-end:与acrossend对齐。
center:居中对齐。
**baseline:**与基准线对齐。
flex-grow
flex-grow:决定了flex items如何扩展。
- 可以任意设置非负数字(正数,正整数,0,默认0)
- 当flex container在main axis 方向有剩余size时,flex--grow才会有效。
- 如果所有flex items的flex-grow总和超过1,则将剩下的size按比例均分到每一个盒子。 所有盒子全部沾满整个父盒子
- 如果所有的flex items 的flex-grow总和不超过1,则将剩下的size和按比例均分每一个盒子,但绝对整个父盒子有剩余。
flex-shink
可以设置任意非负数字(正小数、正整数、0)默认值为1.
当flex items在主轴方向超过了flex container的size,flex itemsd的数属性值才有效
-
如果所有的flex items的flex-shink总和超过1,则每个flex items收缩的size值为,flex-items超出 flex containerd的size*收缩比例/所有flex items的收缩比例之和。 所有盒子全部沾满整个父盒子。
-
如果所有flex itemsd的flex-shink总和sum不超过1,每个flex items收缩的size为 flex items超出flex container的sizesum收缩比例/所以flex iteams之和。
收缩比例=flex-shink*flex iteam的base size