伸缩盒模型-旧

伸缩盒模型的第一版标准，也是支持最为广泛的一版，在手机上使用比较多，需要加前缀。下面讲的所有属性都需要加display: box;(伸缩盒容器)

该属性主要解决了以前需要复杂实现的自适应需求，可以简单的创建水平或垂直的自适应盒模型，并且垂直或水平居中，极大程度的方便了移动web的开发

box-orient

伸缩盒模型的排列方向，分配水平和垂直两个方向，内部顺序受direction属性影响

取值:

horizontal(默认值)
设置伸缩盒对象的子元素从左到右水平排列
vertical
设置伸缩盒对象的子元素从上到下纵向排列
inline-axis
效果和horizontal一样
block-axis
效果和vertical一样

box-orient: horizontal;水平方向自适应

1
3
2

box-orient: vertical;垂直方向自适应，将代码放入body当中设置高度100%查看

1
3
2

box-pack

子元素在主轴方向的对齐方式。horizontal水平方向为主轴，vertical垂直方向为主轴

取值:

start(默认值)
子元素从主轴开始方向排列
center
子元素居中
end
子元素在主轴末尾对齐
justify
子元素两端对齐

box-pack: start;

1
3
2

box-pack: center

1
3
2

box-pack: end

1
3
2

box-pack: justify

1
3
2

box-align

设置子元素侧轴方向的对齐。侧轴垂直于主轴方向,查看box-pack

取值:

start
子元素从开始方向排列
center
子元素居中对齐
end
结束位置对齐
baseline
子元素基线对齐
stretch(默认值)
自适应父元素尺寸

box-align: start

1
2
3

box-align: center

1
2
3

box-align: end

1
2
3

box-align: baseline

1
2，我的行高是30px
3

box-align: stretch

1
2
3

box-flex

指定分配父元素剩余空间的比例

取值:

number
比例，支持浮点数,默认0

我们可以知道a,b,c的宽度分别为50+7*2+1*2=66px，三者加起来即198px，所以剩下的240-198=42px才是父元素的剩余空间，于是a,b,c按照设定的1:1:2来分配这42px，a分得10.5px，b分得10.5px，c分得21px，所以最终a=66+10.5=76.5px，b=66+10.5=76.5px，c=66+21=87px

a
b
c

box-flex-group

动态给数值较大的组分配其内容所需的实际空间（如无内容、padding、border则不占空间），剩余的空间按均分给最小的那个组

取值:

integer
所在组号，默认1

第2个DIV得到实际所需要的空间，1，3均分剩下空间，可以加入box-flex设置分配比例

1
2
3

box-direction

设置排列顺序是否翻转

取值:

normal(默认)
正常顺序
reverse
翻转顺序

box-direction: reverse;

1
2
3