flex 彈性布局

flex布局是什麼？

flex 是 flexible box 的縮寫，意為」彈性布局「，用來為盒狀模型提供最大的靈活性

任何乙個容器都可以指定為 flex 布局

.box

.box

.box

採用flex布局的元素，稱為flex容器，簡稱」容器「

它的所有子元素自動成為容器成員，稱為flex專案，簡稱」專案「

使用flex布局的容器（flex container），它內部的元素自動成為flex專案（flex item）

容器擁有兩根**的軸，水平的主軸（main axis），和豎直的交叉軸

主軸開始的位置，即主軸與右邊框的交點，稱為main start，主軸結束的位置稱為main end

交叉軸開始的位置稱為cross start，交叉軸結束的位置稱為cross end

item按主軸或交叉軸排列，item在主軸方向上佔據的寬度稱為main size，在交叉軸方向上佔據的寬度稱為cross size

此外，需要注意使用flex容器內元素，即flex item的float、clear、vertical-align屬性將失效

以下6個屬性設定在容器上

flex-direction屬性決定主軸的方向（即專案的排列方向）

flex-direction: row | row-reverse | column | column-reverse;

預設情況下，專案都排在一條線（又稱」軸線「），flex-wrap屬性定義，如果一條軸線排不下，如何換行

flex-wrap: nowrap | wrap | wrap-reverse ;

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

flex-flow：< flex-direction > || < flex-wrap >

justify-content屬性定義了專案在主軸上的對齊方式

它可能去5個值，具體對齊方式與軸的方向有關，下面假設主軸從左到右

justify-content: flex-start | flex-end | center | space-between | space-around;

align-items 屬性定義專案在交叉軸上如何對齊

它能取5個值，具體的對齊方式和交叉軸的方向有關，下面假設交叉軸從上到下

align-items: flex-start | flex-end | center | baseline | stretch;

align-content 屬性定義了很多根軸線的對齊方式，如果專案只有一根軸線，該屬性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

以下6個屬性設定在專案上

order 屬性定義專案的排列順序，數值越小，排列越靠前，預設為0

order:< integer >;

flex-grow 屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大

如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）

如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍

flex-grow: < number > /* default 0 */

flex-shrink 屬性定義了專案的縮小比例，預設為1，即如果空間不足，該專案將縮小

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

如果乙個專案的flex-shrink 屬性為0，其他專案都為1，則空間不足時，前者不縮小

負值對該屬性無效

flex-shrink：< number >; /* default 1 */

flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）

瀏覽器根據這個屬性，計算主軸是否有多餘空間，它的預設值為auto，即專案的本來打下

它可以設為跟width或height屬性值一樣的值（比如350px），則專案將佔據固定空間

flex-basis： < length > | auto; /* default auto */

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

該屬性有兩個快捷值：auto（1 1 auto）和 none（0 0 auto）

建議優先使用這個屬性，而不是單獨寫三個分離的屬性，因為瀏覽器會推算相關值

flex:none | [ <『flex-grow』> <『flex-shrink』> || <『flex-basis』> ]

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

預設值為auto，表示繼承父元素的 align-items屬性，如果沒有父元素，則等同於 stretch

align-self: auto | flex-start | flex-end | center | baseline | stretch;

flex布局（彈性布局）

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

Flex布局（彈性布局）

flex是flex box的縮寫，即彈性布局。任何乙個容器都可以指定為flex布局。行內元素也可以使用flex布局。webkit核心的瀏覽器，必須加上 webkit字首。box.box.box注意 設為flex布局以後，子元素的float clear和vertical align屬性將失效。採用fl...

Flex布局 彈性布局

1.flex direction flex direction屬性決定主軸的方向 即專案的排列方向 flex direction row row reverse column column reverse 2.flex wrap 預設情況下，專案都排在一條線 又稱 軸線 上。flex wrap屬性定...