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

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

注舊版本的屬性值：

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

flex容器的每一個子元素均為一個flex子元素。注意：felx容器直接包含的文本變為匿名的彈性子元素。

注意：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子元素的伸縮性。

flex屬性
flex（彈性容器中項目的長度）

flex: flex-grow flex-shrink flex-basis/auto/initial/inherit;
flex屬性設置彈性容器中項目的長度。
flex屬性是flexGrow、flexSHrink、flexBasis屬性的簡寫，即：能夠定義3個屬性的值。
注意：如果元素不是彈性容器，flex屬性將不會有效果。
flex的值及其說明

HTML文件

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表