九十、深入弹性（Flex）布局
生活随笔
收集整理的這篇文章主要介紹了
九十、深入弹性（Flex）布局
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
@Author：Runsen
| 2020/12/2、 周三、今天又是奮斗的一天。 |
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。
容器默認存在兩根主軸：水平方向主軸(main axis)和垂直方向交叉軸(cross axis)，默認項目按主軸排列。
- main start/main end：主軸開始位置/結束位置；
- cross start/cross end：交叉軸開始位置/結束位置；
- main size/cross size：單個項目占據主軸/交叉軸的空間；
設置在容器上的屬性有6種。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-item
- align-content
flex-direction：決定主軸的方向
- row（默認）：主軸水平方向，起點在左端；
- row-reverse：主軸水平方向，起點在右端；
- column：主軸垂直方向，起點在上邊沿；
- column-reserve：主軸垂直方向，起點在下邊沿。
flex-wrap屬性：定義換行情況
flex-wrap屬性：設置是否換行和換行情況
有的時候，項目都排列在一條軸線上，但有可能一條軸線排不下。
<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的簡寫
justify-content屬性：定義項目在主軸上的對齊方式。
align-content屬性：定義多根軸線的對齊方式
align-content屬性設置的前提：容器必須設置flex-wrap：··
如果項目只有一根軸線，該屬性不起作用。
所以，容器必須設置flex-wrap：···；
子對象的設置
設置在項目上的屬性也有6個。
-
order：order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0。
-
flex-grow：該屬性是指當子元素總寬度和比盒子寬度小的時候，子元素該如何瓜分父元素剩余寬度。
-
flex-shrink：當子元素總寬度和比盒子寬度大的時候，子元素該如何壓縮自己適應父元素寬度。
-
flex-basis：指定了 flex 元素在主軸方向上的初始大小
-
flex：flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值為0 1 auto
-
align-self：align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。
總結
以上是生活随笔為你收集整理的九十、深入弹性（Flex）布局的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 八十九、常见的圣杯布局和双飞翼布局
- 下一篇： 五十五、深入插入排序和选择排序