背景

flex布局更有效的實(shí)現(xiàn)對齊，空間分配。最近又學(xué)習(xí)下flex子元素的尺寸計(jì)算規(guī)則，主要是

flex-grow

flex-shrink

一、基本概念

1.1 主軸(Main axis)

定義了flex元素布局起始點(diǎn)和方向，flex子元素在主軸上依次放置。

主軸有4個(gè)方向，通過

flex-direction

row

水平方向，從左到右，默認(rèn)的

row-reverse

水平方向，從右到左

column

垂直方向，從上到下

column-reverse

垂直方向，從下到上

1.2 主軸的尺寸（Main axis size）

就是flex容器content矩形（不包含padding, border, margin區(qū)域）在主軸方向的尺寸。

1.3 交叉軸（Cross axis）

交叉軸就是跟主軸錘子的方向，主要用于flex元素的對齊。

1.4 交叉軸的尺寸（Cross axis size）

就是flex容器content矩形（不包含padding, border, margin區(qū)域）在Cross軸方向的尺寸。

1.5 flex盒模型（flex box）

display為

flex

inline-flex

1. flex容器包含的不僅是flex元素，也包含空白空間。

2. 涉及的CSSflex-directionflex-wrapflex-flow

flex-direction
flex-wrap
flex-flow

flex-direction和 flex-wrap的簡寫。

justify-content

控制flex容器內(nèi)容（flex元素和空白空間）在主軸方向?qū)R。注意區(qū)分align-items。

align-content

控制多行flex容器個(gè)行的對齊方式。

align-items

控制flex容器內(nèi)容（flex元素和空白空間）在交叉軸方向?qū)R。

Tip：

1、這些CSS屬性都是有相關(guān)性的：

首頁先指定flex容器的主軸方向(flex-direction), 如果flex子元素超過在主軸 尺寸，那就涉及是否換行（flex-wrap）。如果沒有超過主軸尺寸，那就涉及行內(nèi)對齊（justify-content）, 如果存在多行每個(gè)行直接也要對齊（align-content）。

2、可能比較容易混淆 justify-content，align-content，align-items。

記住content是指flex元素和空白空間，items指的是flex元素。這樣就容易就是這三個(gè)屬性的用處了。

1.6 flex元素(flex items)

1. 語法

flex box的子元素，不包含流外子元素（ absolute, fix元素），但是包含float元素。

flex子元素相鄰的margin不會發(fā)生合并。

float元素作為flex子元素時(shí)，float屬性無效（因?yàn)橐獏⑴cflex布局，不是流式布局）。