弹性盒子的基本用法

什么是弹性盒子

就是一个盒子而里面的内容会随着盒子的改变而发生适应盒子改变而改变

弹性盒子的基本组成

弹性容器：元素设置display：flex；
弹性元素：弹性容器的子元素
主轴：弹性元素排列方向
辅轴：垂直于主轴
注意：一个元素可以是弹性容器，也可以弹性元素
弹性盒子是代替浮动的

弹性盒子的使用及其属性

1.设置弹性元素在弹性容器里的排列方向
flex-direction
取值：colum 垂直方向 自上向下
Colum-reverse 自下向上
row 水平方向 自左向右
row-reverse 自右向左
2.设置主轴空白空间的分布
justify-content
取值：
center主轴空白空间分布 居中显示
flex-start 是弹性元素在主轴开始处排列
flex-end 是元素在主轴结束处排列
space-between 是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离
space-around；是空白空间平均分配在两侧
space-evenly 是空白空间平均分配在一侧
3.设置弹性元素在辅轴的排列方式
align-items
取值：center 辅轴居中
flex-end 辅轴结束
flex-start 辅轴开始
4.设置弹性元素是否转行
flex-wrap ：wrap 转行 nowrap/不转行
5.设置辅轴元素空白空间的分布
center弹性元素在辅助轴居中显示
flex-start 是弹性元素在主轴开始处排列
flex-end 是元素在主轴结束处排列
space-between 是空白空间平均分布在弹性元素之间，弹性元素与弹性容器之间没有距离
space-around；是空白空间平均分配在两侧
space-evenly 是空白空间平均分配在一侧

弹性元素的设置

1.设置弹性元素扩大系数，当弹性容器的主轴宽度>弹性元素时，
注意弹性元素实际占有空间与系数和基础长度有关
flex-grow 默认值为0
2.设置弹性元素缩小系数，当弹性容器的主轴宽度<弹性元素时，
注意弹性元素实际占有空间与系数和基础长度有关
flex-shrink 默认值为0
3.设置弹性元素的
order 值越大，排在后面，
注意：设置order属性的弹性元素在没有设置order属性弹性元素后面排列