問(wèn)題描述

最近在練習(xí)flexbox 所以先不使用bootstrap我想要我的布局如圖 每個(gè)1 2 3 4 5 之間可以自己設(shè)定margin

如圖:

我剛知道了，只要在flexbox中設(shè)置 justify-content:space-between; ，就可以把1row剩餘的width，平均分配成margin了，而設(shè)置了flex-flow:row wrap;的話(huà)，當(dāng)子項(xiàng)目超過(guò)100%就會(huì)自動(dòng)斷行，比如說(shuō)現(xiàn)在有個(gè)container和box，大致會(huì)是這樣。

.container{ display:flex; justify-content:space-between; flex-flow:row wrap;}.box{ flex-basis:30%;}

如圖:DEMO: https://jsfiddle.net/jasonHsi...

後來(lái)為了調(diào)整，又找到了一個(gè)屬性 flex-grow:1; 可以讓row剩下的width，被每個(gè)flex子項(xiàng)目平均分配，就是把justify-content拿掉，加上flex-grow:1;

.container{ display:flex; flex-flow:row wrap;}.box{ flex-basis:30%; flex-grow:1;}

如圖:

DEMO:https://jsfiddle.net/jasonHsi...

雖然很不錯(cuò)，但是離我一開(kāi)始想要做的布局有些出入，請(qǐng)問(wèn)要如何利用flexbox完成這樣的布局呢?

問(wèn)題解答

<p class='row'> <p class='col'>1</p> <p class='col'>2</p> <p class='col'>3</p> <p class='col'>4</p> <p class='col'>5</p></p>

.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

說(shuō)一個(gè)簡(jiǎn)單實(shí)現(xiàn)，就是使用:after創(chuàng)建一個(gè)偽元素填充最后一個(gè)位置，來(lái)達(dá)到你要的效果。

另外，flex布局不是萬(wàn)能的，多重布局之間融會(huì)貫通，才能發(fā)揮最大優(yōu)勢(shì)

一般使用flex 是為了自動(dòng)計(jì)算剩余空間， 按你說(shuō)的這種情景，還是使用inline-block 或者浮動(dòng) 比較合適。

<ul class='ui-flex-row flex-wrap'><li class='ui-flex-col-33'> <p class='placeholder'>33</p></li><li class='ui-flex-col-33'> <p class='placeholder'>33</p></li><li class='ui-flex-col-33'> <p class='placeholder'>33</p></li><li class='ui-flex-col-33'> <p class='placeholder'>33</p></li><li class='ui-flex-col-33'> <p class='placeholder'>33</p></li><li class='ui-flex-col-33'> <p class='placeholder'>33</p></li> </ul>.flex-wrap { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap;}.ui-flex-row { padding: 0 5px; margin-bottom: 10px;}.ui-flex-row> [class*=ui-flex-col-] { margin: 0 1.5% 0.625rem 1.5%;}.ui-flex-col-33 { width: 30.3%;}.ui-flex-row .placeholder { padding: 0 10px; background-color: #ddd; font-size: 0.875rem; line-height: 2.4; text-align: center; color: #bbb;}

結(jié)尾放入幾個(gè)高度為0的空標(biāo)簽，寬度和你row一樣寬的元素

<p class='row'> <p class='col'>1</p> <p class='col'>2</p> <p class='col'>3</p> <p class='col'>4</p> <p class='col'>5</p> <p class='fix'></p> <p class='fix'></p></p>

.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;}