容器的屬性
flex-direction屬性決定主軸的方向（即專案的排列方向）。
flex-direction: row | row-reverse | column | column-reverse;
row（預設值）：主軸為水平方向，起點在左端。
row-reverse：主軸為水平方向，起點在右端。
column：主軸為垂直方向，起點在上沿。
column-reverse：主軸為垂直方向，起點在下沿。
flex-wrap屬性定義，如果一條軸線排不下，如何換行
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，預設值為row nowrap。
justify-content屬性定義了專案在主軸上的對齊方式。
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
align-items屬性定義專案在交叉軸上如何對齊。
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：交叉軸的中點對齊。
baseline: 專案的第一行文字的基線對齊。
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（預設值）：軸線佔滿整個交叉軸
Flex 布局教程 彈性布局
一 容器指定flex布局 box display flex 塊級元素設定 box display inline flex 行內元素設定 box display webkit flex webkit核心 display flex 二 容器的屬性 1 flex direction 決定主軸的方向，即專案...
Flex 布局教程 語法篇
採用 flex 布局的元素，稱為 flex 容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為 flex 專案 flex item 簡稱 專案 預設存在兩根軸 水平的主軸 main axis 和垂直的交叉軸 cross axis 主軸的開始位置 與邊框的交叉點 叫做...
Flex 布局教程 語法篇
網頁布局 layout 是 css 的乙個重點應用。div div id more class asset more 布局的傳統解決方案，基於盒狀模型 依賴 display 屬性 position 屬性 float 屬性。它對於那些特殊布局非常不方便，比如，垂直居中 就不容易實現。2009年，w3c...