Flex布局基礎語法

前言：

1.flex布局支援所有瀏覽器。（ie10以上）

2.webkit核心的瀏覽器，必須加上-webkit字首。

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

flex-start（預設值）：左對齊

flex-end：右對齊

center： 居中

space-between：兩端對齊，專案之間的間隔都相等。

space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。

flex-start：交叉軸的起點對齊。

flex-end：交叉軸的終點對齊。

center：交叉軸的中點對齊。

baseline: 專案的第一行文字的基線對齊。

stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。

flex-start：與交叉軸的起點對齊。

flex-end：與交叉軸的終點對齊。

center：與交叉軸的中點對齊。

space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。

space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

stretch（預設值）：軸線佔滿整個交叉軸。

2.flex-grow:專案剩餘空間放大比例。預設為0。

3.flex-shrink:專案縮小比例，預設為1，如果空間不足，該專案將縮小。

4.flex-basis：定義了在分配多餘空間之前，專案佔據的主軸空間，預設auto

5.flex:是flex-grow, flex-shrink 和 flex-basis的簡寫，預設值為0 1 auto。

6. align-self:align-self屬性允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性。

Flex布局語法

flex 是 flexible box 的縮寫，意為 彈性布局 用來為盒狀模型提供最大的靈活性。任何乙個容器都可以指定為 flex 布局。box 行內元素也可以使用 flex 布局。box webkit 核心的瀏覽器，必須加上 webkit字首。box 注意，設為 flex 布局以後，子元素的flo...

Flex布局語法

container 複製 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專案 flex item 簡稱 專案 設定在容器上的屬性 container 複製 container 複製 container 複製 假設主軸從...

flex 布局 語法

flex布局概念 用法 box 複製 容器預設存在兩根軸 水平的主軸和垂直的交叉軸。株洲開始的位置叫做 main start，結束位置叫做 main end 交叉軸開始的位置叫做 cross start，結束的位置叫做 cross end。專案預設沿主軸排列，單個專案佔據的主軸空間叫做 main s...