flexbox簡介

flexbox簡介

什麼是flexbox

flexbox是一種新的佈局方式，這種佈局方式是2009年W3C提出的方案。它能夠簡便，完整，完成頁面的佈局。目前，它已經獲得全部瀏覽器的支持。

可是flexbox從2009年以來，有各類版本的變化，好比2009年版本和2011年版本差異比較大。

爲何要有flexbox

每一個新事物出現都有其歷史使命的。flexbox也是如此，傳統的佈局依賴於屏幕的寬度和高度，或者依賴於計算的百分比，可是flex則是直接按照比例關係進行佈局展現。

這樣作的好處就是當屏幕進行拉昇等狀況的時候，flex佈局的頁面仍然符合咱們的預期。

好比一個橫排佈局

|-----|-----|----------|
|  1  |  1  |     2    |
|-----|-----|----------|

平時的佈局狀況咱們就會爲1設置寬度25%，2設置寬度50%。可是這個時候，若是咱們要變成下面這個佈局呢？

|-----|-----|-----|----------|
|  1  |  1  |  1  |     2    |
|-----|-----|-----|----------|

那麼咱們就須要從新設置比例了，1比例爲20%，2比例爲40%。

在flexbox中，咱們就能夠直接設置一個橫排爲一個flex容器，而後子結構1的比例爲1（flex:1）,自結構2的比例爲(flex:2)。

flexbox都有哪些屬性能夠設置

強烈推薦(《A Complete Guide to Flexbox》)[https://css-tricks.com/snippets/css/a-guide-to-flexbox/]。文章圖文並茂地說了各個屬性的各類含義。

父容器的屬性

• display:flex。 代表這個容器是flex佈局。
• flex-direction: row | row-reverse | column | column-reverse; 代表容器裏面的子元素的排列方向。
• flex-wrap: nowrap | wrap | wrap-reverse; 若是子元素溢出父容器的時候是否進行換行。
• justify-content: flex-start | flex-end | center | space-between | space-around; 這一個容器子元素橫向排版在容器的哪一個位置
• align-items: flex-start | flex-end | center | baseline | stretch; 這個容器子元素縱向排版在容器的哪一個位置
• align-content: flex-start | flex-end | center | space-between | space-around | stretch; 當容器內有多行項目的時候，項目的佈局

子元素的屬性

• order: ; 子元素的排序
• flex-grow: ; 分配剩餘空間的比例
• flex-shrink: ; 分配溢出空間的比例
• flex-basis: | auto;
• flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] 在容器中佔比
• align-self: auto | flex-start | flex-end | center | baseline | stretch; 特定某個子元素的排布狀況

參考文章

(A Complete Guide to Flexbox)[https://css-tricks.com/snippets/css/a-guide-to-flexbox/]
(終極Flexbox屬性查詢列表)[http://www.w3cplus.com/css3/css3-flexbox-cheat-sheet.html]
(一個完整的Flexbox指南)[http://www.w3cplus.com/css3/a-guide-to-flexbox.html]
(Flex 佈局教程：語法篇)[http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html]
(利用flexbox構建可伸縮佈局)[http://yanni4night.com/blog/flexbox-layout.html]