css - flexbox 布局設定 margin的問題

Question

最近在練習flexbox 所以先不使用bootstrap我想要我的布局如圖 每個1 2 3 4 5 之間可以自己設定margin 如圖: 我剛知道了，只要在flexbox中設置 justify-content:space-between; ，就可以把1row剩餘的width，平均分...

黄舟 · Answer

.row{
  display: flex;
  flex-wrap: wrap;
  background: red;
}
.col{
  box-sizing: border-box; 
  width: 30.333333%;
  margin: 10px 1.5%;
  background:#eee;
  height: 120px;
}

效果：codepen

PHP中文网 · Answer

說一個簡單實現，就是使用:after創建一個偽元素填充最後一個位置，來達到你要的效果。

另外，flex佈局不是萬能的，多重佈局之間融會貫通，才能發揮最大優勢

黄舟 · Answer

一般使用flex 是為了自動計算剩餘空間，依你說的這種情景，還是使用inline-block 或浮動比較合適。

阿神 · Answer

雷雷

<img src="http://img.php.cn/upload/image/000/000/000/af09f3ee1fed28e44d342d1a9d87b5d1-0.png">

巴扎黑 · Answer

結尾放入幾個高度為0的空標籤，寬度和你row一樣寬的元素

.row{
  display: flex;
  justify-content:space-between;
  flex-flow:row wrap;
  background: red;
}
.col{
  box-sizing: border-box; 
  width: 30.333333%;
  background:#eee;
  height: 120px;
  margin:10px 0;
}
.fix {
  width: 30.333333%;
  height:0;
  margin: 0;
}