九十、深入弹性（Flex）布局
@Author：Runsen
| 2020/12/2、 周三、今天又是奮斗的一天。 |
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來(lái)為盒裝模型提供最大的靈活性。任何一個(gè)容器都可以指定為Flex布局。
容器默認(rèn)存在兩根主軸：水平方向主軸(main axis)和垂直方向交叉軸(cross axis)，默認(rèn)項(xiàng)目按主軸排列。
- main start/main end：主軸開始位置/結(jié)束位置；
- cross start/cross end：交叉軸開始位置/結(jié)束位置；
- main size/cross size：單個(gè)項(xiàng)目占據(jù)主軸/交叉軸的空間；
設(shè)置在容器上的屬性有6種。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-item
- align-content
flex-direction：決定主軸的方向
- row（默認(rèn)）：主軸水平方向，起點(diǎn)在左端；
- row-reverse：主軸水平方向，起點(diǎn)在右端；
- column：主軸垂直方向，起點(diǎn)在上邊沿；
- column-reserve：主軸垂直方向，起點(diǎn)在下邊沿。
flex-wrap屬性：定義換行情況
flex-wrap屬性：設(shè)置是否換行和換行情況
有的時(shí)候，項(xiàng)目都排列在一條軸線上，但有可能一條軸線排不下。
<head><style>#app{width: 300px;background-color: green;display: flex;flex-direction:row;flex-wrap: wrap ;}#app div{height: 100px;width: 100px;background-color: yellow;}</style> </head> <body><div id="app"><div>1</div><div>2</div><div>3</div><div>4</div></div> </body>flex-flow屬性：flex-direction和flex-wrap的簡(jiǎn)寫
justify-content屬性：定義項(xiàng)目在主軸上的對(duì)齊方式。
align-content屬性：定義多根軸線的對(duì)齊方式
align-content屬性設(shè)置的前提：容器必須設(shè)置flex-wrap：··
如果項(xiàng)目只有一根軸線，該屬性不起作用。
所以，容器必須設(shè)置flex-wrap：···；
子對(duì)象的設(shè)置
設(shè)置在項(xiàng)目上的屬性也有6個(gè)。
-
order：order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0。
-
flex-grow：該屬性是指當(dāng)子元素總寬度和比盒子寬度小的時(shí)候，子元素該如何瓜分父元素剩余寬度。
-
flex-shrink：當(dāng)子元素總寬度和比盒子寬度大的時(shí)候，子元素該如何壓縮自己適應(yīng)父元素寬度。
-
flex-basis：指定了 flex 元素在主軸方向上的初始大小
-
flex：flex屬性是flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫，默認(rèn)值為0 1 auto
-
align-self：align-self屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式，可覆蓋align-items屬性。
總結(jié)
以上是生活随笔為你收集整理的九十、深入弹性（Flex）布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 八十九、常见的圣杯布局和双飞翼布局
- 下一篇： 五十五、深入插入排序和选择排序