弹性布局笔记

弹性盒布局

前言

基于主轴(x轴)和侧轴(y轴)进行排列
换行之后每多一行  可以理解为多一个主轴

一.父元素

1.声明一个弹性盒
display：flex；

2.设置子标签排列方向(变换主轴和侧轴的方向)
flex-direction:row（正向横排）/row-reverse（反向横排）/column（正向竖排）/column-reverse（反向竖排）
注意：这个会调转轴的方向

3.换行  （换行后每多一行会多一条主轴）
flex-wrap:wrap/wrap-reverse/no-wrap

4.容器中子标签的对齐方式
主轴：
justify-content： flex-start/flex-end/center/space-between（与父容器两边没有距离，元素均匀排列 ）  
/space-around；（与父容器两边有间距，且间距是元素间距的一半）/spaced-evenly（与父容器间距和元素间距相等）
只有单行侧轴：
align-items： flex-start/flex-end/center/stretch（元素不设置宽高会被拉伸，默认值）
整体多行侧轴（只适用于换行后）：
align-content：flex-start/flex-end/center/space-between（与父容器两边没有距离，元素均匀排列 ）  
/space-around；（与父容器两边有间距，且间距是元素间距的一半）/spaced-evenly（与父容器间距和元素间距相等）

二.子元素

1.子元素在容器中占据剩余空间
flex：份数；        建议写0-1；   

2.单一元素y轴对齐方式（会覆盖align-items）

align-self：flex-start/flex-end/center/stretch（元素不设置宽高会被拉伸，默认值）    

3.单一元素排列

order：数字（正负数都行） 数字越大排的越后   每个元素默认order：0；  如果需要元素与元素换位 可以在每个元素加order，