定義彈性盒子
display: flex;
flex-direction 屬性
flex-direction 用來(lái)來(lái)確定主軸的方向爹脾，從而確定基本的項(xiàng)目排列方向舶担。
????row默認(rèn)值坡疼。靈活的項(xiàng)目將水平顯示，正如一個(gè)行一樣衣陶。
????row-reverse：主軸為水平方向柄瑰，起點(diǎn)在右端闸氮；
????column：主軸為垂直方向，起點(diǎn)在上沿教沾；
????column-reverse：主軸為垂直方向蒲跨，起點(diǎn)在下沿。
flex-wrap屬性
默認(rèn)情況下授翻，項(xiàng)目都排在一條線上（又稱“軸線”）上或悲，并且超出不會(huì)自動(dòng)換行。
flex-wrap 屬性定義堪唐，如果以條軸線排不下巡语， 如何換行。
? ? nowrap（默認(rèn)值）：不換行（強(qiáng)行擠壓淮菠，平均分配寬度）男公；
????wrap：換行，第一行在上?（從上往下一次排列）合陵；
????wrap-reverse：換行枢赔，第一行在下方（從下往上一次排列）；
????flex-flow flex-flow 屬性是 flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫(xiě)形式拥知，默認(rèn)值 為 row nowrap 踏拜。.box{ flex-flow: row wrap; }
justify-content 屬性
justify-content 屬性定義了項(xiàng)目在主軸上的對(duì)齊方式。
????flex-start（默認(rèn)值）：左對(duì)齊
????flex-end：右對(duì)齊
????center： 居中
????space-between：兩端對(duì)齊低剔，項(xiàng)?之間的間隔都相等执隧。
????space-around：每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等。所以户侥，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍镀琉。
align-items 屬性
align-items 屬性的取值及其含義：（具體對(duì)??式與交叉軸的方向有關(guān)。下面假設(shè)交叉軸為從左到右蕊唐。）
flex-start：交叉軸的起點(diǎn)對(duì)齊屋摔。
flex-end：交叉軸的終點(diǎn)對(duì)齊。
center：交叉軸的中點(diǎn)對(duì)齊替梨。
baseline：所有文字相對(duì)于同一基線對(duì)齊
align-content 屬性
align-content 屬性定義了多根軸線的對(duì)齊方式钓试。如果項(xiàng)目只有一根軸線，該屬性不起作用副瀑。
align-content 屬性的取值及其含義：
flex-start：與交叉軸的起點(diǎn)對(duì)齊弓熏。
flex-end：與交叉軸的終點(diǎn)對(duì)齊。
center：與交叉軸的中點(diǎn)對(duì)齊糠睡。
space-between：與交叉軸兩端對(duì)齊挽鞠，軸線之間的間隔平均分布。
space-around：每根軸線兩側(cè)的間隔都相等。所以信认，軸線之間的間隔比軸線與邊框的間隔大一倍材义。
stretch（默認(rèn)值）：軸線占滿整個(gè)交叉軸。
差不多了嫁赏，下面我們來(lái)具體的看下怎么使用這些屬性
首先看下幾張經(jīng)常會(huì)遇到的設(shè)計(jì)圖
像這種布局一般用浮動(dòng)的話寫(xiě)起來(lái)會(huì)很麻煩 還要解決各種兼容性的bug
先實(shí)現(xiàn)第一張圖的效果
css和html
效果圖
這樣就實(shí)現(xiàn)了一個(gè)簡(jiǎn)單的京東導(dǎo)航款熬，具體像素等在細(xì)寫(xiě)，可以加margin和padding攘乒；但是一般情況會(huì)加一個(gè)怪異和模型
box-sizing:border-box;
其實(shí)道理都是一樣的华烟，不要麻煩套的盒子多，盒子套的越多分的約清晰持灰，而且后期維護(hù)還好修改，不用做太多的改動(dòng)
本期就到這里负饲；
