CSS Warning

在 flex 佈局之前，有各種佈局方式：

• float + clear

• position relative + absolute

• display inline-block

• 負邊距(margin)

等。而 flex 作為一種佈局方式，在很早之前就已經出現了，只不過礙於相容性問題，才沒有得到大範圍的使用。

但現在已經 8102 年啦~相容性問題也得到了非常大的改善，愉快地使用 flex 吧~

網上高質量的 flex 教程多如牛毛，我也無意再花時間贅言，這裡主要是通過寫幾個小 demo 來實踐下阮一峰老師的 flex 教程。

/* flex 最重要的幾個屬性 */

父容器屬性：

flex-direction：主軸的方向。

flex-wrap：超出父容器子容器的排列樣式。

flex-flow：flex-direction 屬性和 flex-wrap 屬性的簡寫形式。

justify-content：子容器在主軸的排列方向。

align-items：子容器在交叉軸的排列方向。

align-content：多根軸線的對齊方式。

子容器屬性：

order：子容器的排列順序

flex-grow：子容器剩餘空間的拉伸比例

flex-shrink：子容器超出空間的壓縮比例

flex-basis：子容器在不伸縮情況下的原始尺寸

flex：子元素的 flex 屬性是 flex-grow,flex-shrink 和 flex-basis 的簡寫

align-self
 

• 1.使用 flex 完成手機頁面佈局

JS bin

效果圖：

在實現這個 demo 的時候，遇到了一個問題：

當 header / main / footer 都設定了 display:flex 時，每當 main 當中的元素（mian>ul>li）增加 margin 或者 padding 的時候，header 和 footer 的高度都會被擠壓變小（header 和 footer 在此之前已經設定好了固定高度）；

而當把 header 和 footer 的 display:flex 屬性去掉後，main 的內容的 margin 和 padding 增加不會影響到 header 和 footer 的高度。

原因：當一個元素的屬性設定了 display:flex 的時候，他有一個預設屬性 flex-shrink。

flex-shrink屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小。如果所有專案的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個專案的flex-shrink屬性為0，其他專案都為1，則空間不足時，前者不縮小。

解決辦法：給 header 和 footer 設定 flex-shrink:0;

• 2.使用 flex 完成雙飛翼佈局

demo:JS bin

效果圖：

• 3.完美居中

這個就更簡單了，在父元素上新增三行程式碼即可下班：

.parent{
    display:flex;
    justify-content:center;
    align-items:center;
}