弹性布局

弹性布局

弹性容器：

元素上设置了display:flex;的元素就是弹性容器

弹性子元素：

元素上设置了display:flex;的元素就是弹性容器里面的直接子元素就是弹性子元素。

语法：display:flex;

主轴分布的设置：

justify-content
 flex-start
 flex-end
 center
 space-around:平均分布，两边有间距，两边的间距是中间的一半
 space-between:平均分布，两边没有间距
 space-evenly:平均分布，间距一样

侧轴分布的设置：

stretch:拉伸，会默认将没有设置高度的子元素拉伸到跟父元素一样的高度。设置了高度就没有效果
 flex-start
 flex-end
 center

 

换行

语法：flex-warp:warp

多行分布的设置：

align-content:
 flex-start
 flex-end
 center
 space-around:平均分布，两边有间距，两边的间距是中间的一半
 space-between:平均分布，两边没有间距
 space-evenly:平均分布，间距一样

剩余空间的占据：

Flex:数字

 

对弹性子元素进行排序

order:数字

根据order的数字，进行从小到大排序