對于一個有強迫癥的前端來說，一兩個像素的錯位是無法容忍的，但有時就有這樣的情況發(fā)生，直到了解了Flex

任意一個容器都可以制定flex布局

div {
  display: flex;
}

或者行內(nèi)元素也可以

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：元素的排列順序，數(shù)值越小越靠前，默認為0

.item {
  order: <int>;
}

flex-grow：放大比例，默認為0（0：如果存在剩余空間也不放大）

.item {
  flex-grow: <number>;
}
//如果所有元素flex-grow都為1，則他們等分剩余空間

flex-shrink：縮小比例，默認為1

.item {
  flex-shrink: <number>;
}

flex-basis：在分配多余空間之前，容器占據(jù)的主軸空間，默認值為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;
}