Flexbox布局（CSS3 彈性布局，Flexible Box）之 基本概念解析 – WEB前端開發(fā)

接上一篇： Flexbox布局（CSS3 彈性布局，Flexible Box）之基本介紹

Flexbox布局的基本概念

這里再詳細介紹一下基本概念

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

flex容器是flex元素的的父元素。 通過設置 display 屬性的值為 flex 或 inline-flex 定義。

注舊版本的屬性值：

• box：將對象作為彈性容器顯示。（最老版本）
• inline-box：將對象作為內聯塊級彈性容器顯示。（最老版本）
• flexbox：將對象作為彈性容器顯示。（過渡版本）
• inline-flexbox：將對象作為內聯塊級彈性容器顯示。（過渡版本）

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

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

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

軸

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

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

方向

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

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

行

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

尺寸

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

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

?