接上一篇： Flexbox布局（CSS3 彈性布局，F(xiàn)lexible Box）之基本介紹

Flexbox布局的基本概念

這里再詳細(xì)介紹一下基本概念

flex container（ flex容器 或 彈性容器 ）

flex容器是flex元素的的父元素。 通過(guò)設(shè)置 display 屬性的值為 flex 或 inline-flex 定義。

注舊版本的屬性值：

• box：將對(duì)象作為彈性容器顯示。（最老版本）
• inline-box：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性容器顯示。（最老版本）
• flexbox：將對(duì)象作為彈性容器顯示。（過(guò)渡版本）
• inline-flexbox：將對(duì)象作為內(nèi)聯(lián)塊級(jí)彈性容器顯示。（過(guò)渡版本）

flex item（flex子元素 或 彈性子元素）

flex容器的每一個(gè)子元素均為一個(gè)flex子元素。注意：felx容器直接包含的文本變?yōu)槟涿膹椥宰釉亍?/p>

注意： Flexbox布局和原來(lái)的布局是2套概念，所以部分css屬性在flex子元素中將不起作用，比如： float ,? clear ?,? vertical-align ?,? column-* 等

軸

每個(gè)flex子元素沿著 主軸（main axis） 依次相互排列 。交叉軸（cross axis） 垂直于主軸 。

• 屬性 flex-direction 定義主軸方向。
• 屬性 justify-content 定義了flex子元素如何沿著主軸排列。
• 屬性 align-items 定義了flex子元素如何沿著交叉軸排列。
• 屬性 align-self 覆蓋父元素的 align-items屬性， 定義了單獨(dú)的flex子元素如何沿著交叉軸排列。

方向

flex容器的 主軸起點(diǎn)邊緣（main start） 、 主軸終點(diǎn)邊緣（main end） 和 交叉軸起點(diǎn)邊緣（cross start） , 交叉軸終點(diǎn)邊緣（cross end） 為flex子元素排列的起始和結(jié)束位置。它們具體取決于由 writing-mode （從左到右、從右到左等等）屬性建立的向量中的主軸和交叉軸位置。

• 屬性 order ?將元素依次分組，并決定誰(shuí)先出現(xiàn)。
• 屬性 flex-flow 是屬性 flex-direction 和 flex-wrap 的簡(jiǎn)寫，用于排列flex子元素。

行

flex子元素根據(jù) flex-wrap 屬性控制的側(cè)軸方向（在這個(gè)方向上可以建立垂直的新線），既可以是一行也可以是多行排列。

尺寸

flex子元素寬高可相應(yīng)地等價(jià)于 主尺寸（main size） 和 交叉尺寸（cross size） ，它們都分別取決于flex容器的主軸和側(cè)軸。

• ? min-height 和 min-width 屬性的初始值為新增關(guān)鍵字 auto。
• 屬性 flex 是 flex-basis ， flex-grow 和 flex-shrink 的縮寫，代表flex子元素的伸縮性。

?