CSS彈性（flexible）盒子

彈性盒子        

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成

彈性容器經過display:flex | inline-flex將其定義爲彈性容器

彈性容器內包含了一個或多個彈性子元素

彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈局

彈性子元素一般在彈性盒子內一行顯示。默認狀況每一個容器只有一行

讓元素產生一個塊級的flex容器盒子。flex容器中的孩子被稱爲flex items，且用flex佈局模型佈局

• flex佈局是基於flex directions（決定主軸/側軸方向）

主軸：main axis      縱軸：cross axis

橫向邊界：main start       main end

縱向邊界：cross start     cross end

主軸方向（寬度）不會擴展可是會收縮，而側軸方向（高度）（未設置時）會進行擴展

• start和end線

彈性盒子中文字的方向再也不是由左右決定，而是由start和end線決定。若是flex-direction爲row且是英文系統，則主軸的start邊在左側，而end邊在右側。而若是是Arabic系統，這兩條線位置是相反的

• 子元素設置position:absolute

該子元素不參與彈性佈局，而是根據彈性容器的content-box進行佈局

 

 

屬性        

說明	應用於	默認值	說明
flex-direction	彈性容器（控制子元素佈局方向和間距）	row	決定了主軸位置及其方向，row表示水平方向，column表示垂直方向
flex-wrap		no-wrap	定義彈性元素是旋轉在同一行仍是分紅多行 flex-flow: row nowrap 是flex-direction和flex-wrap的縮寫
align-content		stretch	側軸方向元素行的佈局，對於單行無效 默認值stretch：若是行內子元素的大小總和小於容器，那麼大小爲auto的就會自動擴展（但仍限於max-height/max-width）
align-items		stretch	側軸方向彈性元素的佈局，默認stretch，因此側軸方向會自動擴展充滿容器 區別：align-items關注當前彈性容器行內元素的佈局；而align-content關注行的佈局
justify-content		flex-start	定義主軸方向上的元素間的間距佈局
align-self	彈性子元素（調整大小和順序）	auto	在當前彈性行中重寫元素的align-items值
flex-basis		auto	定義一個彈性元素（根據box-sizing的值，默認是content-box）盒子的主軸空間大小
flex-grow		0（比例值）	定義一個彈性元素擴展的比例，相對於彈性盒子中剩餘空間的大小（最終大小=擴展+原來設置的）。它決定了子元素在彈性盒子中應該佔據的大小 不一樣的item有不一樣的比例，須要根據比例間關係進行劃分。如4:2=2:1，因此這兩個設置是相同的
flex-shrink		1（比例值）	當彈性元素總大小大於彈性盒子，則元素會根據flex-shrink相對於正常佈局時超過的部分大小收縮以充滿容器 flex: 0 1 auto是flex-grow, flex-shrink, flex-basis的合併
order		0	根據order的值升序定義元素出現的順序。若是order值同樣，則根據源碼中出現的順序

參考：

https://drafts.csswg.org/css-flexbox-1/#flex-container

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html