flex布局布局之flex 1屬性詳解

採用flex布局的元素，稱為flex容器（flex container），簡稱"容器"。它的所有子元素自動成為容器成員，稱為flex專案（flex item），簡稱"專案"。

容器預設存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。主軸的開始位置（與邊框的交叉點）叫做main start，結束位置叫做main end；交叉軸的開始位置叫做cross start，結束位置叫做cross end。

專案預設沿主軸排列。單個專案佔據的主軸空間叫做main size，佔據的交叉軸空間叫做cross size。

基本概念

flex屬性是flex item的屬性，也就是flex布局的容器裡所有子元素的屬性。

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

該屬性有兩個快捷值:auto(1,1,auto)和none(0,0,auto)。

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

flex的取值分析

flex取auto和none

.item
等同於.item
*************************====
.item
等同於.item

flex取乙個非負數字，則該值為flex-grow的值

.item 等同於.item // flex取乙個非負數字，flex-shrink預設取1，flex-basis預設取0%

flex取兩個非負數字，則分別視為flex-grow和flex-shrink的值，flex-basis取0%

.item 等同於.item

flex取乙個非負數字和長度或百分比，則視為flex-grow和flex-basis的值。flex-shrink取1

.item 等同於.item

flex取乙個長度或者百分比，則視為flex-basis的值。flex-grow和flex-shrink分別取1

.item 等同於.item ******************** .item 等同於.item

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

取值情況：

1.取auto時，會首先檢索該項目的主尺寸，如果該項目的主尺寸不為auto，則採取主尺寸的值。否則，取專案本來的大小。

//flex-basis取auto時，檢索主尺寸為200px，取主尺寸值200px。 .item ********************= .item 檢索主尺寸也為auto或者沒有值，則取專案（flex item）本身的大小

2.取值為百分比時，會檢索專案（flex item）的父容器（flex container）的主尺寸，如果有值，按其主尺寸的百分比取值。如果沒有值，或者父容器的尺寸取決於子元素，則計算結果和設為auto一樣

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大。flex-grow分配的時剩餘空間，即父容器總尺寸 - 每個子元素flex-basis = 剩餘空間，各子元素按照flex-grow的比例佔據剩餘空間

文章參考：

阮一峰：flex布局教程