弹性盒子

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 设置弹性盒子内的子元素的排列顺序

值为整数

数越小，排列越靠前