一壤玫、flex布局
學習flex彈性布局為了解決一些特殊的布局豁护，在這之前我們可以利用大盒子套小盒子，浮動欲间，定位等來完成一些簡單的布局择镇，但是不能完成有些特殊的布局。
1括改、任何一個容器都可以設(shè)為flex布局腻豌，稱該容器為flex容器，它的所有子元素成為flex項目嘱能。（塊級元素也可以使用flex布局）
2吝梅、項目默認沿主軸排列，主軸默認在水平方向惹骂，交叉軸默認在垂直方向苏携。
二、對于容器有哪些設(shè)置屬性对粪？
1右冻、首先我們要給一個父盒子設(shè)置為彈性布局display:flex
2、指定為flex布局后著拭，我們對該容器可以有下面6種屬性設(shè)置纱扭。
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
(1)、flex-direction屬性決定主軸的方向（即項目的排列方向）儡遮，它有四個屬性值
flex-direction: row | row-reverse | column | column-reverse;
row:(默認值)：主軸為水平方向乳蛾，起點在左端
row-reverse:主軸為水平方向，七點在右端
column：主軸為垂直方向鄙币，起點在上沿
column：主軸為垂直方向肃叶，起點在下沿
(2)、flex-wrap屬性定義：如果一條軸線排不下十嘿，如何換行因惭。它有三個值：
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap（默認）：不換行
wrap:換行，第一行在上面
wrap-reverse:換行绩衷，第一行在下方
nowrap默認不換行時蹦魔，如果容器寬度小于所有項目寬度總和，項目寬度會自適應(yīng)容器寬度
項目大下不變唇聘，當容器裝不下時會換到下一行
換行版姑，但是顛倒上下行順序
(3)、以上兩種屬性可以簡寫為：
flex-flow: <flex-direction> || <flex-wrap>(4)迟郎、justify-content屬性定義了項目在主軸上的對齊方式剥险。它有五個值。
justify-content: flex-start | flex-end | center | space-between | space-around;
下面假設(shè)主軸為從左到右：
flex-start(默認值)：左對齊
flex-end:右對齊
center：居中
space-between:兩端對齊宪肖，項目之間的間隔都相等表制。
space-around：每個項目兩側(cè)的間隔相等,所以健爬，最左和最右邊的項目離邊框的間隔是項目與項目之間間隔的一半。
(5)么介、align-items屬性定義項目在交叉軸上如何對齊娜遵，它有五個值：
align-items: flex-start | flex-end | center | baseline | stretch ;
具體的對齊方式與交叉軸的方向有關(guān)，下面假設(shè)交叉軸從上到下：
flex-start:交叉軸的起點對齊
flex-end:交叉軸的終點對齊壤短。
baseline:項目的第一行文字的基線對齊设拟。
stretch(默認值)：如果項目未設(shè)置高度或設(shè)為auto，將占滿整個容器的高度久脯。
(6)纳胧、align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線帘撰，該屬性不起作用跑慕。它有五個值。
flex-start:與交叉軸的起點對齊
flex-end:與交叉軸的終點對齊摧找。
center：與交叉軸的中點對齊
space-between:與交叉軸兩端對齊核行，軸線之間的間隔平均分布。
