第一種情況flex屬性不寫flex屬性預設是0 1 auto
flex-grow為0，則存在剩餘空間也不放大
flex-shrink為1，則空間不足該專案縮小
flex-basis為auto，則該專案本來的大小
原始**：
.parent
.parent > div
.item-1
.item-2
style>
class="parent">
class="item-1">
div>
class="item-2">
div>
div>
第二種情況其中乙個元素flex屬性為乙個非負數字flex:1相當於
flex-grow為1
flex-shrink為1
flex-basis為0%
這裡的計算過程是這樣的：
由於item-1什麼都沒設，所以flex-basis為auto保持原來的大小即100px
item-2設定了flex:1，因為它的flex-basis為0%
所以剩餘空間為：600 - 100 - 0% = 500px
因為item-2的flex-grow為1，所以這500px全部分配給item-2，所以item-2就為500px
第三種情況兩個元素flex屬性都為乙個非負數字它們將均分剩餘空間，即各佔300px
第四種情況flex-basis為乙個固定數字item-1為 flex: 1 1 100px;
item-2為 flex: 1 1 200px;
計算過程：
剩餘空間為：600 - 100 - 200 = 300px
因為它們的flex-grow為1，所以剩餘空間的就平均分配，即每項150px
在這裡flex-basis設為固定值，相當於元素大小就為這個值
所以item-1為 100 + 150 = 250px
item-2為 200 + 150 = 350px
Flex 布局的各屬性取值解釋
flex布局是一種彈性布局。布局樣式比較靈活，大多數情況下可以替代float，而且不會脫離文件裡流。flex中定義了兩個軸線，乙個主軸乙個副軸，這個概念你可以想想螢幕座標系 x軸向右，y軸向下 flex的軸線角色可以調換而且方向也可以變。屬性 1。flex direction 這個屬性決定了flex...
CSS margin屬性取值
margin表示乙個元素的外邊距。取值為正值時，表示相對於正常流離鄰近元素更遠，而取負值時，使其更近 但是，設定margin後，四個方向的表現形式不同 div id negtive top div margin top 50px 自身向上移動50px div margin left 50px 自身向...
flex屬性詳解
flex direction 決定主軸的方向，決定子元素垂直或水平排列 flex direction row row reser column column reverse row 預設 水平排列，從左至右 row reverse 水平排列，從右至左 column 垂直排列，從上至下 column ...