「CSS Warning」幾個 flex demo

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;
}