flex基礎語法介紹

《軸線與網格》裡主要講述了grid與flex中，網格與軸線的基本概念，了解了這些基本概念之後，我們可以更輕鬆地對布局方式進行研究，這一篇文章主要描述flex布局中，定義在容器與專案的相關屬性。

display屬性定義了乙個彈性盒子容器，容器是展現為行內或塊狀由所給定的值而決定，此時，他的所有子元素進入flex文件流，稱為伸縮專案。

.box

定義行內容器的flex布局：

.box

對於safiri瀏覽器，需要加上webkit字首（以前遇到過，深坑啊！）

.box

此外，請注意以下兩點：

flex-wrap定義flex專案是否換行顯示。預設情況下，flex專案會盡可能地顯示在一行當中，即預設值為nowarp。

.box

flex-flow是flex-direction和flex-wrap的合併寫法，它同時定義了主軸方向與容器內專案的換行方式，其預設值為row nowarp

.box

justify-content定義了專案在主軸上的對齊方式，但請注意：justify-content只會在主軸專案仍具有剩餘空間時才會起作用。

利用此api，我們便能很容易地實現：等分寬高了。

.box

align-items定義了專案在交叉軸上的對齊方式。可以把它想像成交叉軸的justify-content。

.box

當我們把容器的flex-warp的值設定為warp或者warp-reverse時，若專案不能在一根主軸上顯示，容器便會出現多根主軸。

此時便需要乙個值來定義多根平行軸線的對齊方式，這個值便是align-content。

.box

order定義專案在主軸上的排列順序。數值越小，排列越靠前，預設值為0。

在預設情況下，專案在主軸上的排列順序是依據它們在html文件中出現的先後順序排列的。因我們可以通過控制文件流的先後順序，故此api的使用情況不太普遍。

.item

flex-grow定義了專案的放大比例。如果所有伸縮專案的flex-grow設定了1，那麼每個伸縮專案將設定為乙個大小相等的剩餘空間。如果你給其中乙個伸縮專案設定了flex-grow值為2，那麼這個伸縮專案所佔的剩餘空間是其他伸縮專案所佔剩餘空間的兩倍。

注意：負值對該屬性無效。

.item

類似於flex-grow，flex-shrink定義了專案的縮小比例。其預設值為1。

如果所有專案的flex-shrink都為1，當空間不足時，都將等比例縮小。

如果所有專案都為1，但其中乙個專案的flex-shrink為0，即代表空間不足時，該專案縮小0倍，即為不縮小。

注意：負值對該屬性不起作用。

flex-basis定義了在分配多餘空間之前，專案佔據的主軸空間。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小。

.item

利用flex-basis，我們可以很容易實現頁面布局中的常見問題：兩欄/三欄布局。


class="box">
class="left">leftdiv>
class="main">maindiv>
div>
.box 
.left 
.main

flex是flex-grow、flex-shrink和flex-basis的簡寫，預設值為0 1 auto。後兩個屬性可選。

.item

align-self定義了單個專案上在交叉軸的對齊方式。其預設值為繼承容器的align-items屬性。

具體的屬性值參閱align-items的屬性值。

.item