彈性盒屬相文檔詳細介紹

彈性盒屬相文檔詳細介紹

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

設置子元素在Y軸方向的排列

取值	描述
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的簡寫，用於排列彈性盒子元素

注意

注意如下屬相對彈性盒不起做用

1. 彈性容器中的每個子元素變爲一個彈性子元素，彈性容器直接包含的文本變爲匿名的彈性盒子元素
2. 多列布局中olumn-*屬相對彈性子元素無效
3. float 和 clear 對彈性子元素無效。使用float會致使display屬相計算爲block。
4. vertical-align 對彈性盒子元素的對齊無效。

本教程中帶有小括號的均是我的理解 若有瑕疵，請指出！感謝！！！