彈性盒屬相文檔詳細介紹
阿新 • • 發佈：2018-06-02
nowrap 間距 默認 width 個人 所在 情況下 浮動 導致
設置彈性盒子元素出現的順序 值為： Number
彈性盒屬相文檔詳細介紹
display:flex;
聲明本元素是彈性盒容器
如果目標元素是行內元素 使用display:inline-flex;
flex-direction
| 取值 | 描述 |
|---|---|
| row | 默認值 ,彈性盒子元素按X軸方向順序排列 |
| row-reverse | 彈性盒子元素按照X軸風向逆序排列 |
| column | 彈性盒子元素按照Y軸方向順序排列 |
| column-reverse | 彈性盒子元素按照Y軸方向逆序排列 |
flex-wrap
| 取值 | 描述 |
|---|---|
| nowrap | 默認值，flex子元素只會單行顯示，flex子元素過多會溢出容器，不會開始新行 |
| wrap | flex子元素可以顯示多行，超出的部分會放到新行 |
| wrap-reverse | flex子元素可以顯示多行，只不過會反轉顯示（不是逆序） |
justify-content
設置子元素在X軸方向的排列
| 取值 | 描述 |
|---|---|
| flex-start | 彈性盒子元素以起始元素對齊（類似與不改變子元素順序的 左 浮動） |
| flex-end | 彈性盒子元素以結束位置對齊（類似與不改變子元素順序的右浮動） |
| center | 彈性盒子元素向行中間位置顯示 |
| space-between | 彈性盒子元素平均的分布在行裏，第一個與起始位置邊界對其，最後一個以結束位置邊界對齊 |
| space-around | 彈性盒子元素會平均的分布在行裏，兩端保留了子元素與子元素之間距離大小的一半（兩端指得是起始位置 |
align-items
設置子元素在X軸方向的排列
| 取值 | 描述 |
|---|---|
| flex-start | 彈性盒子元素以起始元素對齊 |
| flex-end | 彈性盒子元素以結束位置對齊 |
| center | 彈性盒子元素向行中間位置顯示 |
| baseline | 如果彈性盒子元素的行內軸與側軸為同一條，則該值與flex-start等效，其他情況下，該軸將與參與基線對齊 |
| stretch | 如果指定側軸大小屬相值為“auto”，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照“min/max-width/height”屬相的限制 |
order
設置彈性盒子元素出現的順序 值為： Number
flex
簡寫方式:flex:1 0 auto;
| 屬相 | 取值 |
|---|---|
| flex-grow(擴展比率) | Number |
| flex-shrink(收縮比) | Number |
| flex-basis(寬度像素值) | Number/auto |
align-self
可以覆蓋align-items屬相用於設置單個子元素如何沿著Y軸排列 （其取值和align-item類似）
| 取值 | 描述 |
|---|---|
| flex-start | 彈性盒子元素以起始元素對齊 |
| flex-end | 彈性盒子元素以結束位置對齊 |
| center | 彈性盒子元素向行中間位置顯示 |
| baseline | 如果彈性盒子元素的行內軸與側軸為同一條，則該值與flex-start等效，其他情況下，該軸將與參與基線對齊 |
| stretch | 如果指定側軸大小屬相值為“auto”，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照“min/max-width/height”屬相的限制 |
flex-flow
flex-flow是flex-wrap和flex-direction的簡寫，用於排列彈性盒子元素
註意
註意以下屬相對彈性盒不起作用
- 彈性容器中的每一個子元素變為一個彈性子元素，彈性容器直接包含的文本變為匿名的彈性盒子元素
- 多列布局中olumn-*屬相對彈性子元素無效
- float 和 clear 對彈性子元素無效。使用float會導致display屬相計算為block。
- vertical-align 對彈性盒子元素的對齊無效。
本教程中帶有小括號的均是個人理解 如有瑕疵，請指出！感謝！！！
彈性盒屬相文檔詳細介紹