弹性布局（弹性盒子）

 传统布局——基于盒子模型，依赖 display 属性、position属性、float属性。 
它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 
并且，传统布局代码冗长，出错率高，要时刻注意清除浮动或者在进行绝对定位时给父元素添加相对定位。否则就容易造成页面布局混乱。 
弹性布局display：flex只对次一级生效

---

 

flex布局默认有两根轴，分别是水平方向的主轴main、垂直方向的交叉轴 axis，这两个轴互相垂直，当主轴方向改变时，交叉轴也会跟着改变

---

父元素：

（改变主轴方向）

flx-direction：row（默认，从左到右）/row-reverse/column（从上而下）/column-reverse

---

换行flew-wrap：wrap（第一行在左上）、nowrap（不换行）、wrap-reverse（第一行在左下）

---

项目在主轴对齐方式justify-content：flex-start、center、flex-end、space-around、space-between、space-evenly

space-between：左右无间隔，中间间隔长度一致
 space-around：左右间隔是中间的一半

space-evenly：左右、中间间隔都一致

---

改变项目在交叉轴的位置 

 align-items：flex-start、center、flex-end、stretch、baseline

---

 align-content（多跟主轴的对齐方式，换行了才用的上）

align-content：

flex-start / center / flex-end /space-between

/space-around /stretch（默认值）

---

简写：flex-flow：felx-direction值/flex-wrap值

---

flex项目属性

align-self，重新规划项目的felx-align属性

align-self：flex-start 、flex-end、stretch、center

优先级高于align-content

---

order：数字；数字越小项目顺序越靠前。默认值是1，要求整数

---

flex-basis，在分配多余空间前（指flex-grow、flex-shrink生效前），占据主轴空间

flex-basis：auto（默认值）

优先级比width高

---

flex-grow，项目的占据剩余空间的分配占比，默认值0

当所有项目均为1，则项目将平分剩余空间进行放大

---

flex-shrink，项目的缩小比例，默认值1

若所有项目均为1，则空间不足，项目会均等比缩小

---

复合写法

flex：flex-grow flex-shrink flex-basis

flex：auto=flex：1 1 auto

项目占据本行主轴的所有剩余空间，因为flex-basis属性高于width，所以不会出现元素溢出

flex：none=flex：0 0 auto

空间不足时项目不会缩小，空间剩余时也不会放大

当项目没指定高度时，align-content：stretch（默认值）会失效。