對于一個有強迫癥的前端來說递沪，一兩個像素的錯位是無法容忍的字币，但有時就有這樣的情況發(fā)生耐亏，直到了解了Flex
任意一個容器都可以制定flex布局
div {
display: flex;
}
或者行內元素也可以
div {
display: inline-flex;
}
兼容性
div {
display: -webkit-flex;
display: flex;
}
設置了flex的容器转晰，子元素的float龟糕、clear、vertical-align將失效
容器六個屬性
flex-direction：屬性決定主軸的方向（即排列方向）
div {
flex-direction: row | row-reverse | column | column-reverse;
}
- row（默認值）：主軸為水平方向悔耘，起點在左端
- row-reverse：主軸為水平方向讲岁，起點在右端
- column：主軸為垂直方向，起點在上沿
- column-reverse：主軸為垂直方向，起點在下沿
flex-wrap：如何換行
div {
flex-wrap: nowrap | wrap | wrap-reverse;
}
- nowrap（默認值）：不換行
- wrap：換行缓艳，第一行在上方
- wrap-reverse：換行校摩，第一行在下方
flex-flow：flex-direction 和 flex-wrap的簡寫形式，默認值：row nowrap
div {
flex-wrap: <flex-direction>||<flex-wrap>
}
justify-content：在主軸上的對齊方式
div {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
- flex-start（默認值）：左對齊
- flex-end：右對齊
- center：居中
- space-between：兩端對齊阶淘，間隔相等
- space-around：兩側間隔相等衙吩，元素之間的間隔比元素與邊框之間的間隔大一倍
align-items：在交叉軸上如何對齊
div {
align-items: flex-start | flex-end | center | baseline | stretch
}
- flex-start：交叉軸的起點對齊
- flex-end：交叉軸的終點對齊
- center：交叉軸的中點對齊
- baseline：第一行文字的基線對齊
- stretch（默認值）：如果容器沒有設置高度或者auto，將占滿整個容器的高度
align-content：多根軸線時的對齊方式（只有一根軸線溪窒，該屬性失效）
div {
align-content: flex-start | flex-end | center | space-between | space-around | stretch
}
- flex-start：交叉軸的起點對齊
- flex-end：交叉軸的終點對齊
- center：交叉軸的中點對齊
- space-between：交叉軸的兩端對齊坤塞，軸線之間的間隔平均分布
- space-around：每根軸線兩側間隔相等
- stretch（默認值）：軸線占滿整個交叉軸
元素的六個屬性
order：元素的排列順序，數值越小越靠前澈蚌，默認為0
.item {
order: <int>;
}
flex-grow：放大比例摹芙，默認為0（0：如果存在剩余空間也不放大）
.item {
flex-grow: <number>;
}
//如果所有元素flex-grow都為1，則他們等分剩余空間
flex-shrink：縮小比例宛瞄，默認為1
.item {
flex-shrink: <number>;
}
flex-basis：在分配多余空間之前浮禾，容器占據的主軸空間，默認值為auto
.item {
flex-basis: <length> | auto;
}
flex：flex-grow份汗，flex-shrink和flex-basis的簡寫盈电，默認值為0 1 auto，后兩個屬性可選
.item {
flex: none | [<'flex-grow'> <'flex-shrink'>? || <'flex-basis'>];
}
align-self：允許單個元素與其他元素不一樣的對齊方式杯活，默認auto
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
