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

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

注舊版本的屬性值：

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

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

注意：Flexbox布局和原來的布局是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子元素的伸縮性。

flex屬性
flex（彈性容器中項(xiàng)目的長(zhǎng)度）

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

HTML文件

最新評(píng)論