弹性布局介绍
一.彈性布局 (重點****************)
首先，給大家上個例子對著下面的屬性介紹方便理解
1.什么是彈性布局
彈性布局就是一種布局方式
主要解決某元素中的子元素的布局方式，為布局提供最大的靈活性
2.彈性布局的相關概念和專業術語
1.容器
要布局的子元素的父元素稱之為容器，容器中寫display:flex
2.項目
要布局的子元素稱之為項目
3.主軸
項目們排列的方向，稱之為主軸（水平和垂直）
如果項目們是按照橫向排列，x軸就是主軸
如果項目們是按照縱向排列，y軸就是主軸
4.交叉軸
與主軸垂直相交的方向軸叫做交叉軸
語法
將元素變為彈性容器，他所有的子元素將變成彈性項目，按照彈性布局的方式去排列顯示
display
取值：flex, 將塊級元素變為容器
inline-flex,將行內元素變為容器
元素設置為flex容器之后，子元素一些樣式屬性會失效
float/clear/vertical-align失效
子元素允許修改尺寸(項目是行內元素也可以修改尺寸)
容器的對齊方式text-align失效
3.彈性容器的樣式屬性
1.flex-direction 主軸方向
取值
1.row 默認值，主軸是x軸，主軸起點在左端
2.row-reverse, 主軸是x軸，主軸起點在右端
3.column 主軸是y軸，主軸起點在頂端
4.column-reverse主軸是y軸，主軸起點在底部
2.flex-wrap
當一個主軸排列不下所有項目時,項目的顯示方式
取值
1.nowrap 默認值，空間不夠，不換行，項目會自動壓縮
2.wrap 空間不夠，就換行，項目不壓縮
3.wrap-reverse 換行，反轉
3.flex-flow
是flex-direction和flex-wrap的縮寫
取值 direction wrap;
ex:flex-flow:row wrap;
4.justify-content
定義項目在主軸上的對齊方式
取值
2.space-around 每個間距相同
3.flex-start 默認值 在主軸起點對齊
4.flex-end 在主軸的終點對齊
5.center 在主軸上居中對齊
5.align-items (容器高度大于項目高度)
項目們在交叉軸上的對齊方式
取值：
1.flex-start 交叉軸起點對齊
2.flex-end 交叉軸終點對齊
3.center 交叉軸居中對齊
4.baseline 交叉軸基線對齊
5.stretch 如果項目未設置高度，在交叉軸上充滿容器
4.項目的屬性
是單獨設置給一個項目的，不影響容器和其他項目
1.order
取值為無單位的整數，定義項目的排列順序，值越小，離起點越近，默認值為0；
2.flex-grow
定義項目的放大比例
如果容器有足夠大的剩余空間，項目將按照比例放大
取值為無單位整數，
默認值為0.不放大。取值越大，占據的剩余空間越多
3.flex-shrink
定義項目的縮小比例，空間不足時，項目該如何縮小
取值為無單位整數
默認值為1，空間不足，等比縮小
0，不縮小
取值越大，占據的空間越小
4.align-self
控制當前項目在交叉軸上對齊方式，與其他項目無關
1.flex-start 交叉軸起點對齊
2.flex-end 交叉軸終點對齊
3.center 交叉軸居中對齊
4.baseline 交叉軸基線對齊
5.stretch 如果項目未設置高度，在交叉軸上充滿容器
6.auto 繼承容器的align-items的效果
總結
- 上一篇： 【语音去噪】基于最小二乘自适应滤波LMS
- 下一篇： Unity对于手柄的支持