flex屬性
flex屬性是flex-grow壶运、flex-shrink和flex-basis的縮寫耕突，其均是作用在項(xiàng)目上，默認(rèn)值為0 1 auto羡蛾。后兩個屬性可選漓帅；
注意： 該屬性有兩個默認(rèn)的值：auto（1 1 auto）和 none（0 0 auto）。建議優(yōu)先使用auto默認(rèn)值痴怨，瀏覽器會推算相關(guān)值忙干。
- flex-grow: 定義項(xiàng)目的放大比例，默認(rèn)為0浪藻；也就是當(dāng)在主軸方向上（假設(shè)項(xiàng)目的排列是沿主軸方向排列）存在剩余空間時捐迫，分配到每個項(xiàng)目上的剩余空間
場景：如果所有項(xiàng)目的flex-grow都為1，那么他們將等分剩余空間爱葵；如果其中一個項(xiàng)目的flex-grow為2施戴，其余的項(xiàng)目為1反浓，那么它占用剩余空間是其他項(xiàng)目的2倍； - flex-shrink: 定義項(xiàng)目的收縮比例赞哗，默認(rèn)為1雷则，即如果空間不足，該項(xiàng)目將縮蟹舅瘛月劈；如果為0，則不縮型课凇艺栈；
場景：如果所有項(xiàng)目的flex-shrink均為1英岭，當(dāng)空間不足時湾盒，將等比例縮小诅妹；如果其中有一個項(xiàng)目的flex-shrink為0罚勾，其余均為1，空間不足時吭狡，前者不縮小 - flex-basis：表示在分配主軸多余空間時尖殃，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個特性划煮，計(jì)算主軸是否存在多余空間送丰。默認(rèn)值為auto，即項(xiàng)目的本來大谐谇铩器躏；它可以設(shè)為跟width或height屬性一樣的值，即項(xiàng)目的固定大小
左右在flex容器上的屬性
- display: flex
表示該容器使用flex布局 - flex-direction屬性
表示創(chuàng)建主軸的方向（即項(xiàng)目的排列方向）
div{
flex-direction: row | row-reverse | column | column-reverse;
}
排列方向如下所示：
image.png
- flex-wrap屬性
默認(rèn)情況下蟹略，項(xiàng)目都排在一條線（軸線）上登失，該項(xiàng)目定義，如果一行排不下挖炬，項(xiàng)目如何進(jìn)行換行
div{
flex-wrap: nowrap(默認(rèn)) | wrap | wrap-reverse;
}
注意： wrap換行是第一行在上方揽浙，wrap-reverse是第一行在下方（相反的方向）
- flex-flow屬性
flex-flow屬性是flex-direction和flew-wrap的簡寫形式，
默認(rèn)是row nowrap意敛；
div{
flex-flow: <flex-direction> | <flex-wrap>
- justify-content屬性
定義項(xiàng)目在主軸上的對齊方式馅巷，假設(shè)flex-direction:row，也就是主軸方向是行草姻，那個該屬性定義的就是項(xiàng)目在一行上的對齊方式钓猬；
div{
justify-content: flex-start(默認(rèn)值) | flex-end | center | space-between | space-around;
}
主要需要注意的屬性有：space-between | space-around
space-between: 兩端對齊，項(xiàng)目之間的間隔相等
space-around: 每個項(xiàng)目兩側(cè)的距離相等碴倾。所以項(xiàng)目之間的間隔是兩側(cè)項(xiàng)目與邊框之間間隔的一倍逗噩，可以理解為給項(xiàng)目添加了margin-left和margin-right屬性掉丽，這樣每個項(xiàng)目之間的間距就增大了
align-items屬性
定義項(xiàng)目在交叉軸（假設(shè)flex-direction:row橫向排列，交叉軸就是豎軸）上的對齊方式
div{
align-items: flex-start | flex-end | center | stretch | baseline;
