記錄一些前端頁(yè)面布局過(guò)程中可能會(huì)用上的復(fù)合屬性
Flex布局
1白魂、flex-flow: flex-direction + flex-wrap
flex-direction：row | column | row/column-reverse（主軸方向）
flex-wrap：nowrap | wrap | wrap-reverse（是否折行顯示）
2巴刻、flex: flex-grow + flex-shrink + flex-basis
flex-grow：彈性元素放大（在寬度有剩余空間的時(shí)候按照比例進(jìn)行一定像素的放大）恨课，可進(jìn)行比例設(shè)定放大比例卦停，默認(rèn)為0（即容器的剩余寬度一般不進(jìn)行分配）
flex-shrink：彈性元素縮小，默認(rèn)值為1（按照計(jì)算等比縮小）
flex-basis：auto | ...px; 設(shè)置元素的初始尺寸插爹，設(shè)置像素之后，像素是為 height 還是 width 的決定權(quán)在于主軸方向的設(shè)置请梢，若主軸方向?yàn)?row 則為設(shè)置 width，若為 column 則為 height毅弧，并且 flex-basis 的優(yōu)先級(jí)高于 width/height。auto 屬性則是依據(jù)元素內(nèi)容決定初始尺寸够坐。
一些簡(jiǎn)寫：
flex: 1; //等同于 flex: 1 1 0%;
flex: 2; //等同于 flex: 2 1 0%;
flex: auto; //等同于 flex：1 1 auto;
flex: none; //等同于 flex: 0 0 auto;（常用于固定尺寸寸宵，不伸縮）
flex-basis 是指定初始尺寸，flex-basis 設(shè)置為0與 auto 的區(qū)別就在于元咙，當(dāng)設(shè)置為0時(shí)為絕對(duì)彈性元素，當(dāng)設(shè)置為 auto 時(shí)為相對(duì)彈性元素蛾坯。那什么是絕對(duì)什么是相對(duì)呢疏遏？
通俗的說(shuō)脉课，絕對(duì)彈性元素就是在彈性元素（某個(gè)盒子）進(jìn)行縮放的時(shí)候，告訴盒子不需要考慮元素尺寸财异；而相對(duì)彈性元素就是在彈性元素進(jìn)行縮放時(shí)倘零，會(huì)先考慮元素尺寸。
3戳寸、容器內(nèi)對(duì)齊
（Ⅰ）主軸上的對(duì)齊方式justify-content
圖片引自簡(jiǎn)書用戶
解釋：
flex-start：默認(rèn)值疫鹊。容器開頭對(duì)齊
flex-end：容器尾部對(duì)齊
為什么說(shuō)容器頭部和尾部呢袖瞻？*
*因?yàn)橹鬏S方向是根據(jù)屬性設(shè)置的，所以頭部尾部根據(jù)屬性設(shè)定而定Ａ！霉晕！
center：居中對(duì)齊
space-around：各行之間留有空行，兩端頂?shù)奖M頭
space-between：隔行之前牺堰，之間，之后都留空白
initial：默認(rèn)值
inherit：繼承父元素屬性
（Ⅱ）交叉軸上的對(duì)齊align-items
交叉軸通俗的理解就是垂直排列伟葫，即y軸
交叉軸較好理解，就不用圖片演示了
stretch：默認(rèn)值奶卓。當(dāng)元素沒(méi)有設(shè)置具體尺寸時(shí)，會(huì)將容器在交叉軸方向撐滿（寬 | 高 撐滿）夺姑。
flex-strat：沿交叉軸起點(diǎn)對(duì)齊
flex-end：沿交叉終點(diǎn)對(duì)齊
center：居中對(duì)齊
baseline：沿第一行文字對(duì)齊
注意嗷掌猛，交叉軸方向也是根據(jù)屬性設(shè)置而定的Ｕ嫡恪＠蟛纭！
（Ⅲ）交叉軸上的分行對(duì)齊align-content
廢話不多說(shuō)先上圖
圖片引自簡(jiǎn)書用戶
觀察圖片中盒子的變化可以得出慕蔚，align-items 與 align-content 的區(qū)別就是，align-items 的負(fù)責(zé)區(qū)域是單行內(nèi)灌闺，但是 align-content 負(fù)責(zé)的是全局。
align-content：stretch | flex-start | flex-end | center | space-between | space-around
與 align-items 的屬性意思相同桂对，不做解釋
除此之外，align-self 可以單獨(dú)對(duì)某個(gè)屬性進(jìn)行交叉軸對(duì)齊方式進(jìn)行設(shè)置鸠匀，優(yōu)先級(jí)大于 align-content蕉斜。
