傳統(tǒng)float與position布局作業(yè)小結(jié)：

1.盡量使用語(yǔ)義化標(biāo)簽。
2.能用position解決的不用float。
3.css選擇器盡量用父子選擇器。
4.img空白邊線處理 display:block。

flex容器的六個(gè)屬性

1、flex-direction決定主軸的方向，即項(xiàng)目的排列方向。

*row(默認(rèn)值)：主軸為水平方向，起點(diǎn)在左端。

.items{
flex-direction:row;
}

*row-reverse:主軸為水平方向，起點(diǎn)在右端。

.items{
flex-direction: row-reverse;
}

*column:主軸為垂直方向，起點(diǎn)在上沿。

.items{
flex-direction:column;
}

*column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

.items{
flex-direction:column-reverse;
}

2、flex-wrap默認(rèn)情況下，項(xiàng)目都排列在一天線（又稱(chēng)“軸線”）上。flex-wrap屬性定義，如果一條線排列不下，是否換行。

*nowrap:默認(rèn)情況，不換行。

.items{
flex-wrap:nowrap;
}

*wrap:換行，第一行在上方。

.items{
flex-wrap:wrap;
}

*wrap-reverse:換行，第一行在上方。

.items{
flex-wrap:wrap-reverse;
}

3、flex-flow屬性是flex-directiong和flex-wrap屬性的簡(jiǎn)寫(xiě)形式，默認(rèn)值為row nowrap

.items{
flex-flow: row nowrap;
}

4、justify-content屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。

*flex-start:默認(rèn)值，左對(duì)齊

.items{
justify-content:flex-start;
}

*flex-end：右對(duì)齊

.items{
justify-content:flex-end;
}

*center:居中對(duì)齊

.items{
justify-content:center;
}

*space-between:兩端對(duì)齊，項(xiàng)目之間的間隔相等。

.items{
justify-content:space-between;
}

*space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。

.items{
justify-content:space-around;
}

5、align-items項(xiàng)目在交叉軸上的對(duì)齊方式

*flex-start：與交叉軸的起點(diǎn)對(duì)齊

.items{
align-items:flex-start;
}

*flex-end：與交叉軸的終點(diǎn)對(duì)齊

.items{
align-items:flex-end;
}

*center:與交叉軸的中點(diǎn)對(duì)齊

.items{
align-items:center;
}

*baseline:項(xiàng)目第一行的中線對(duì)齊

.items{
align-items:baseline;
}

*stretch:占滿整個(gè)容器

.items{
align-items:stetch;
}

6、align-content屬性多根軸線的對(duì)齊方式。

*flex-start:與交叉軸的起點(diǎn)對(duì)齊。

.items{
align-content:flex-start;
}

*flex-end：與交叉軸的終點(diǎn)對(duì)齊

.items{
align-content:flex-end;
}

*center:與交叉軸的中點(diǎn)對(duì)齊

.items{
align-content:center;
}

*space-between:與交叉軸兩端對(duì)齊。

.items{
align-content:space-between;
}

*space-around：每根軸線兩側(cè)的間隔都相等。

.items{
align-content:space-around;
}

*stretch：默認(rèn)值，軸線占滿整個(gè)交叉軸。

align-content:stretch;

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：總結(jié) 的很棒 , 注意錯(cuò)別字: flex-directiong, 多一個(gè)g