宣告本元素是彈性盒容器
如果目標元素是行內元素 使用display:inline-flex;取值
描述row
預設值 ,彈性盒子元素按x軸方向順序排列
row-reverse
彈性盒子元素按照x軸風向逆序排列
column
彈性盒子元素按照y軸方向順序排列
column-reverse
彈性盒子元素按照y軸方向逆序排列
取值描述
nowrap
預設值，flex子元素只會單行顯示，flex子元素過多會溢位容器，不會開始新行
wrap
flex子元素可以顯示多行，超出的部分會放到新行
wrap-reverse
flex子元素可以顯示多行，只不過會反轉顯示（不是逆序）
設定子元素在x軸方向的排列
取值描述
flex-start
彈性盒子元素以起始元素對齊（類似與不改變子元素順序的左浮動）
flex-end
彈性盒子元素以結束位置對齊（類似與不改變子元素順序的右浮動）
center
彈性盒子元素向行中間位置顯示
space-between
彈性盒子元素平均的分布在行裡，第乙個與起始位置邊界對其，最後乙個以結束位置邊界對齊
space-around
彈性盒子元素會平均的分布在行裡，兩端保留了子元素與子元素之間距離大小的一半（兩端指得是起始位置和結束位置）
設定子元素在y軸方向的排列
取值描述
flex-start
彈性盒子元素以起始元素對齊
flex-end
彈性盒子元素以結束位置對齊
center
彈性盒子元素向行中間位置顯示
baseline
如果彈性盒子元素的行內軸與側軸為同一條，則該值與flex-start等效，其他情況下，該軸將與參與基線對齊
stretch
如果指定側軸大小屬相值為「auto」，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照「min/max-width/height」屬相的限制
設定彈性盒子元素出現的順序 值為：number簡寫方式:flex:1 0 auto;
屬相取值
flex-grow(擴充套件比率)
number
flex-shrink(收縮比)
number
flex-basis(寬度畫素值)
number/auto
可以覆蓋align-items屬相用於設定單個子元素如何沿著y軸排列 （其取值和align-item類似）
取值描述
flex-start
彈性盒子元素以起始元素對齊
flex-end
彈性盒子元素以結束位置對齊
center
彈性盒子元素向行中間位置顯示
baseline
如果彈性盒子元素的行內軸與側軸為同一條，則該值與flex-start等效，其他情況下，該軸將與參與基線對齊
stretch
如果指定側軸大小屬相值為「auto」，則其值會使專案的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照「min/max-width/height」屬相的限制
flex-flow是flex-wrap和flex-direction的簡寫，用於排列彈性盒子元素注意以下屬相對彈性盒不起作用
彈性容器中的每乙個子元素變為乙個彈性子元素，彈性容器直接包含的文字變為匿名的彈性盒子元素
多列布局中olumn-*屬相對彈性子元素無效
float和clear對彈性子元素無效。使用float會導致display屬相計算為block。
vertical-align對彈性盒子元素的對齊無效。
彈性盒屬相文件詳細介紹
彈性盒屬相文件詳細介紹 宣告本元素是彈性盒容器 如果目標元素是行內元素 使用display inline flex 取值 描述row 預設值 彈性盒子元素按x軸方向順序排列 row reverse 彈性盒子元素按照x軸風向逆序排列 column 彈性盒子元素按照y軸方向順序排列 column rev...
怪異盒模型及彈性盒子詳細介紹
content box 這是由 css2.1 規定的寬度高度行為。寬度和高度分別應用到元素的內容框。在寬度和高度之外繪製元素的內邊距和邊框。為元素設定的寬度和高度決定了元素的邊框盒。就是說，為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪製。通過從已設定的寬度和高度分別減去邊框和內邊距才...
css彈性盒模型詳解 介紹
官方的統一回答 彈性盒模型是指在父級改變大小的時候內部的自己元素也會相應的改變大小，即子集會按照父級的大小按比例自適應大小。彈性盒模型的提出可以解決一些響應式布局的需求 採用flex布局的元素，稱為flex容器 flex container 簡稱 容器 它的所有子元素自動成為容器成員，稱為flex專...