弹性盒子---CSS3布局方式

1.弹性盒子/伸缩盒子

如果要使用弹性盒子属性，首先要将父级元素变成弹性盒子

Flex-direction 设置伸缩盒子的内部元素的排列方式

Row    从左到右安行排列

Column  从上到下按照列排列

Row-reverse   从右到左按照行排列

Column-reverse  从下到上按照列排列

Flex-shrink  设置弹性盒子的内部元素的收缩方式

注意：所有盒子的默认收缩方式都是1

Flex-grow   设置弹性盒子的扩展比例

注意：所有盒子的默认扩展比率为0

Flex-basis   设置伸缩盒子内部元素的基准值

注意：所有元素默认伸缩基准值为元素的宽度

Flex-wrap 设置伸缩盒子的子元素超出的处理方式

Nowrap   自动收缩子元素以适应盒子

Wrap     超出盒子换到下一行

Wrap-reverse   超出盒子换到上一行

Justify-content  设置伸缩盒子的子元素在水平方向的对齐方式

Flex-start   靠左对齐

Flex-end    靠右对齐

Center      居中对齐

Flex-between   两端对齐

Flex-around    平均分布

如果flex-between和flex-around这两个属性不起作用的话可以换成

Space-between和space-around

Align-items  设置伸缩盒子的子元素的排列方式

Flex-start  在伸缩盒子的左上角排列

Flex-end   在伸缩盒子的左下角排列

Center     在伸缩盒子的中间排列

Baseline   在伸缩盒子的左上角基线排列

Strecth     拉伸所有的子元素同父元素等高

Align-self  针对伸缩盒子中的某个元素单独设置排列方式

Auto   使用默认方式

Flex-start   在伸缩盒子左上角排列

Flex-end   在伸缩盒子的左下角排列

Center     在伸缩盒子的中间排列

Baseline   在伸缩盒子的左上角基线排列

Strecth     拉伸所有的子元素同父元素等高

注意：该属性是在align-items的基础上对某个子元素进行单独设定

该属性的默认方式并不是左上角，而是父级添加的属性

Align-content   设置伸缩盒子的子元素换行后的对齐方式

注意：如果伸缩盒子的子元素没有换行，那么该属性无效

Flex-start  换行内容靠左上角

Flex-end   换行内容靠左下角

Center     换行内容居中显示

Space-between   换行内容在垂直方向的顶部和底部分开

Space-around   各行在弹性盒子容器中平均分布，两端保留子元素和子元素之间间距大小的一半

Strecth    拉伸子元素

Order  设置弹性盒子内的子元素的排列顺序

值为整数

数越小，排列越靠前