弹性容器:元素设置display: flex;
弹性元素:弹性容器的子元素
主轴:弹性元素的排列方向
辅轴:垂直于主轴
注意:一个元素既可以是弹性容器,也可以是弹性元素
弹性盒子是代替浮动
-->
<!-- 弹性容器里面设置
1.设置弹性元素的在弹性容器排列方向:
## flex-direction
取值:
row 水平方向 自左向右 默认
column 垂直方向 自上向下
column-reverse 自下向上
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
取值:
nowrap 默认值 不转行
wrap 转行
wrap-reverse 反向转行
**5**.设置辅轴空白空间的分布:
## align-content
取值:
center: 是弹性元素在辅轴居中显示
flex-start:是弹性元素在辅轴开始处排列
flex-end:是弹性元素在辅轴结束处排列
space-between:是空白空间平均分布在弹性元素之间,弹性元素与弹性容器之间没有距离
space-around:是空白空间平均分布在弹性元素二侧,弹性元素与弹性容器之间有距离
space-evenly:是空白空间平均分布在弹性元素一侧,弹性元素与弹性容器之间有距离
-->
<!-- 弹性元素
1.设置弹性元素扩大系数,当弹性容器的主轴宽度>弹性元素时,
注意:弹性元素实际占用空间与系数和基础长度有关
## flex:1;平均非配
## flex-grow:默认值0
2.设置弹性元素缩小系数,当弹性容器的主轴宽度<弹性元素时,
注意:弹性元素实际占用空间与系数和基础长度有关
## flex-shrink:默认值0
3.设置弹性元素的顺序
## order 值越大,排在后面
注意:设置order属性的弹性元素在没有设置order属性大弹性元素后面排列