看實例:
1.未使用flex佈局之前的樣子
2.使用display:flex(flex-direction:row，此處可寫可不寫，因爲一旦使用flex佈局默認值就是它);
彆着急, 請看解析:
使用flex-direction:row,此時可以有以下幾種佈局結果
接下來會用到的屬性爲justify-content(主軸上的伸縮)和align-items(交叉軸上的伸縮)兩個屬性。
1.以row:爲主軸,對主軸進行控制位置。
(1).居左
(2).居中
(3).居右
以上三種就是以row爲主軸,控制主軸
2.以row爲主軸,對相交軸控制
(1).壓縮到左上方
(2).壓縮到左中間
(3).壓縮到左下角
3.以row爲主軸,同時對justiny-content和align-items進行控制。
(1).在交叉軸壓縮控制完畢後,然後對主軸進行位置居左(雖然沒變,但是的確justin-content:flex-start;的默認值就是居左)。
(2). 在交叉軸壓縮控制完畢後,然後對主軸進行位置居中。
(3).在交叉軸壓縮控制完畢後,然後對主軸進行位置居右。
以clomun爲主軸的原理同上,只是,將main-axis和crolss-axis的方向改變了。
如有問題，請多多賜教。
