10-弹性布局

发表于 | 分类于 |

新：

1
flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>

复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。
如果缩写「flex: 1」, 则其计算值为「1 1 0%」
如果缩写「flex: auto」, 则其计算值为「1 1 auto」
如果「flex: none」, 则其计算值为「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 则其计算值为「0 1 auto」，即「flex」初始值

旧：

1
2
3
box-flex：<number>
默认值：0
适用于：伸缩盒子元素
1
2
3
box-direction：normal | reverse
默认值：normal
适用于：伸缩盒容器
1
2
3
4
5
6
7
8
box-orient：horizontal | vertical | inline-axis | block-axis
默认值：horizontal
适用于：伸缩盒容器

horizontal： 设置伸缩盒对象的子元素从左到右水平排列
vertical： 设置伸缩盒对象的子元素从上到下纵向排列
inline-axis： 设置伸缩盒对象的子元素沿行轴排列
block-axis： 设置伸缩盒对象的子元素沿块轴排列
1
2
3
box-lines：single | multiple
默认值：single
适用于：伸缩盒容器
1
2
3
4
5
6
7
8
box-pack：start | center | end | justify
默认值：start
适用于：伸缩盒容器

start： 设置伸缩盒对象的子元素从开始位置对齐（大部分情况等同于左对齐，受）
center： 设置伸缩盒对象的子元素居中对齐
end： 设置伸缩盒对象的子元素从结束位置对齐（大部分情况等同于右对齐）
justify： 设置或伸缩盒对象的子元素两端对齐
1
2
3
4
5
6
7
8
9
box-align：start | end | center | baseline | stretch
默认值：stretch
适用于：伸缩盒容器

start： 设置伸缩盒对象的子元素从开始位置对齐
center： 设置伸缩盒对象的子元素居中对齐
end： 设置伸缩盒对象的子元素从结束位置对齐
baseline： 设置伸缩盒对象的子元素基线对齐
stretch： 设置伸缩盒对象的子元素自适应父元素尺寸
1
2
3
4
5
6
7
8
box-ordinal-group：<integer>
默认值：1
适用于：伸缩盒子元素

设置或检索伸缩盒对象的子元素的显示顺序。
效果等同于过渡版本的flex-order属性和新版本的order属性；
数值较低的元素显示在数值较高的元素前面；
相同数值的元素，它们的显示顺序取决于它们的代码顺序；
1
2
3
4
5
box-flex-group：<integer>
默认值：1
适用于：伸缩盒子元素

<integer>：用整数值来定义伸缩盒对象的子元素所在的组。