Web前端培訓(xùn)：flex布局中父元素常用屬性總結(jié)

flex 彈性布局操作方便、布局極為簡單，所以在適合移動端WEB應(yīng)用。flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。flex布局父項常見屬性有以下七種，掌握它們可以使你在后續(xù)的學(xué)習(xí)和開發(fā)中十分必要。

1. 常見父項屬性

以下由6個屬性是對父元素設(shè)置的

flex-direction：設(shè)置主軸的方向

justify-content：設(shè)置主軸上的子元素排列方式

flex-wrap：設(shè)置子元素是否換行 ? align-content：設(shè)置側(cè)軸上的子元素的排列方式(多行)

align-items：設(shè)置側(cè)軸上的子元素排列方式(單行)

flex-flow：復(fù)合屬性，相當(dāng)于同時設(shè)置了 flex-direction 和 flex-wrapflex 彈性布局操作方便、布局極為簡單，所以在適合移動端WEB應(yīng)用。flex 是 flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性，任何一個容器都可以指定為 flex 布局。flex布局父項常見屬性有以下七種，掌握它們可以使你在后續(xù)的學(xué)習(xí)和開發(fā)中十分必要。

2.flex-direction 設(shè)置主軸的方向

①主軸與側(cè)軸

在 flex 布局中，是分為主軸和側(cè)軸兩個方向，同樣的叫法有 ： 行和列、x 軸和y 軸
默認(rèn)主軸方向就是 x 軸方向，水平向右

默認(rèn)側(cè)軸方向就是 y 軸方向，水平向下

②屬性值
flex-direction 屬性決定主軸的方向（即項目的排列方向）

注意： 主軸和側(cè)軸是會變化的，就看 flex-direction 設(shè)置誰為主軸，剩下的就是側(cè)軸。而我們的子元素是跟著主軸來排列的

3.justify-content 設(shè)置主軸上的子元素排列方式

justify-content 屬性定義了項目在主軸上的對齊方式，注意： 使用這個屬性之前一定要確定好主軸是哪個

4.flex-wrap 設(shè)置子元素是否換行

默認(rèn)情況下，項目都排在一條線(又稱”軸線”)上。flex-wrap屬性定義，flex布局中默認(rèn)是不換行的。

5.align-items 設(shè)置側(cè)軸上的子元素排列方式（單行 ）

該屬性是控制子項在側(cè)軸（默認(rèn)是y軸）上的排列方式 在子項為單項（單行）的時候使用

6.align-content 設(shè)置側(cè)軸上的子元素的排列方式（多行）

設(shè)置子項在側(cè)軸上的排列方式 并且只能用于子項出現(xiàn) 換行 的情況（多行），在單行下是沒有效果的。

align-content 和 align-items 區(qū)別

align-items 適用于單行情況下， 只有上對齊、下對齊、居中和 拉伸

①align-content 適應(yīng)于換行（多行）的情況下（單行情況下無效）， 可以設(shè)置 上對齊、 下對齊、居中、拉伸以及平均分

配剩余空間等屬性值。

②總結(jié)就是單行找 align-items 多行找 align-content

7.flex-flow

flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的復(fù)合屬性

flex-flow:row wrap;

• flex-direction：設(shè)置主軸的方向

• justify-content：設(shè)置主軸上的子元素排列方式

• flex-wrap：設(shè)置子元素是否換行 ? align-content：設(shè)置側(cè)軸上的子元素的排列方式（多行）

• align-items：設(shè)置側(cè)軸上的子元素排列方式（單行）

• flex-flow：復(fù)合屬性，相當(dāng)于同時設(shè)置了 flex-direction 和 flex-wrap