傳統的佈局方式

• 傳統的佈局中我們一般會去使用如下方式達成我們想要的效果：
  

float + clear
position relative + absolute
display inline-block
負margin

• 這些佈局可以任意組合來達成我們想要的效果，但是也增加了難度。比如說垂直居中就沒有那麼容易實現

一種更靈活的佈局方式

• 我們使用flex佈局一般會通過給一個容器設定display: flex將其變成flex容器，內部的元素就成了容器成員。
• 我們先來看一張圖片

圖中的flex-container就是容器，包裹著的兩個flex item也就是內部成員。
兩道紅線就是主軸與側軸，主軸的預設方向是從左到右，側軸是從上到下，各自都有自己的起點與終點。 並且主軸和側軸的方向可以改變，起點和終點也隨之更改。

容器的屬性

display

設定flex-container

.container {
  display: flex; /* or inline-flex */
}

複製程式碼

4個flex item自動的排在了一行

flex-direction

row: 預設主軸方向從左到右，起點在左端
row-reverse: 主軸方向從右到左，起點在右端
column: 主軸方向從上到下, 起點在上端
column-revers: 主軸方向從從下到上， 起點在下端

.container {
 flex-direction: row | row-reverse | column | column-reverse;
}
複製程式碼

flex-wrap

nowrap: 預設不換行
wrap: 當容器寬度無法滿足子元素時讓子元素換行顯示
wrap-reverse: 換行並且顛倒順序

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
複製程式碼

flex-flow

是flex-direction和flex-wrap的縮寫，預設值是row和nowrap。

flex-flow: <‘flex-direction’> || <‘flex-wrap’>
複製程式碼

justify-content

主軸的對齊方式 flex-start: 預設左對齊 flex-end: 右對齊 center: 居中 space-between: 兩端對齊 space-around： 元素均勻分佈

.container {
  justify-content: flex-start | flex-end | center:  | space-between | space-around;
}
複製程式碼

align-items

側軸對齊方式 flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。
stretch（預設值）：軸線佔滿整個交叉軸。如果子元素未設定高度

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
複製程式碼

最後一張圖由於我加上了margin: 10px所以未填滿整個高度

item的屬性

flex-grow

定義item的放大比例，預設為0，那麼有剩餘空間也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}
複製程式碼

flex-shrink

定義item的收縮比例，預設為1，那麼空間不足將收縮。如果為0，那麼其他專案都為1的情況下該專案不收縮。

.item {
  flex-shrink: <number>; /* default 0 */
}
複製程式碼

flex-basis

定義了item在分配多餘空間之前的佔據主軸的尺寸。預設值為auto，即item本身的大小。

.item {
  flex-basis: <length> | auto; /* default auto */
}
複製程式碼

flex

該屬性是flex-grow和flex-shrink以及flex-basis的縮寫，建議優先使用此屬性而不是以上屬性單個使用，方便瀏覽器計算相關值。

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
複製程式碼

align-self

此屬性是定義自身在側軸的對其方式，可覆蓋父容器的align-item。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
複製程式碼

order

定義了item的排列順序，數值小的在前面，預設值為0，也可以為負數。

.item {
  order: <integer>;
}
複製程式碼

最後

我們通過flex佈局只需要三行程式碼就可實現完美居中。

.container {
  display: flex; //設定flex容器
  justify-content: center; //主軸對其方式居中
  align-items: center; //側軸對其方式居中
}
複製程式碼