flex布局快速入門

傳統布局的核心是盒子模型，依賴 display 屬性 + position 屬性 + float 屬性。可以看出來傳統布局非常容易實現像 word 左對齊，右對齊這樣的功能，可以說，傳統布局更適合於文字排版。

flex 是 flexible box 的縮寫，可以看做彈性的盒子模型。

使用 flex 首先要設定父元素display: flex。任何元素都可以指定為 flex 布局：

塊狀元素：

.box

行內元素

.box

設為 flex 布局以後，子元素的 float、clear 和 vertical-align 屬性將失效。

flex 的核心的概念就是容器和軸。容器包括外層的父容器和內層的子容器，軸包括主軸和交叉軸，如下圖所示：

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置叫做 main start，結束位置叫做 main end；交叉軸同理，子容器預設沿主軸排列。單個子容器佔據的主軸空間叫做 main size，佔據的交叉軸空間叫做 cross size。

容器具有這樣的特點：父容器可以統一設定子容器的排列方式，子容器也可以單獨設定自身的排列方式，如果兩者同時設定，以子容器的設定為準。

父容器一共有6個屬性:flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

untitled

flex-direction 屬性和 flex-wrap 屬性的簡寫形式，預設值為 row nowrap

untitled

子容器一共有6個屬性：order, flex-grow, flex-shrink, flex-basis, flex, align-self

預設值為 0，可以為負值，數值越小排列越靠前。order 只能為整數。

untitled

預設值為 0，就是即使存在剩餘空間，也不瓜分。如果定義了非 0 值，則按照比例瓜分。flex-grow 只能為整數。

untitled

預設為1，即如果空間不足，則子容器將縮小。如果所有子容器的 flex-shrink 都為1，當空間不足時，都將等比例縮小。如果某個子容器的 flex-shrink 為0，其他子容器都為1，則空間不足時，前者不縮小。

untitled

表示在不伸縮的情況下子容器佔據主軸空間的大小，預設為 auto，表示子容器本來的大小。

flex-grow, flex-shrink 和 flex-basis 的簡寫，預設值為 0 1 auto

align-self 屬性允許單個子容器有與其他子容器不一樣的對齊方式，預設值為auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。改屬性的取值與 align-items 相同。

untitled

mdn css flexible box layout

flex 布局教程：語法篇