問題描述

http://jsfiddle.net/deathfang/6kSNV/1/

上面這種布局，可以用更簡(jiǎn)潔的HTML實(shí)現(xiàn)不？

比如這種

<ul> <li style='background: red'>1</li> <li style='background: green'>2</li> <li style='background: yellow'>3</li> <li style='background: yellowgreen'>4</li> <li style='background: greenyellow'>5</li> <li style='background: pink'>6</li> <li style='background: blueviolet'>7</li> <li style='background: aliceblue'>8</li> <li style='background: orangered'>9</li></ul>

float方案上面也有，iOS7 safari測(cè)試右邊會(huì)有1px誤差，手機(jī)掃描下面二維碼可以看到

問題解答

回答1：

當(dāng)然可以， 既然你那么節(jié)約代碼, 那么就不用選擇使用ul了(還要去除默認(rèn)樣式).實(shí)現(xiàn)的關(guān)鍵點(diǎn)在于:

父級(jí)flex-wrap高為wrap (默認(rèn)是nowrap)子元素有border的話, 把box-sizing的值設(shè)為border-box

jsfiddle卡出翔了, 直接看代碼吧：

HTML:

<p class='flex-container'> <p class='flex-item flex-gold'>1</p> <p class='flex-item flex-red'>2</p> <p class='flex-item flex-pink'>3</p> <p class='flex-item flex-blue'>4</p> <p class='flex-item flex-yellowgreen'>5</p> <p class='flex-item flex-lightgreen'>6</p></p>

CSS:

.flex-container { display: flex; flex-flow: row wrap;}.flex-item { color: #fff; flex: 1 33.33333333%; height: 70px; line-height: 70px; text-align: center; border: solid 1px #efefef; box-sizing: border-box;}.flex-gold { background-color: gold;}.flex-red { background-color: red;}.flex-pink { background-color: pink;}.flex-blue { background-color: blue;}.flex-yellowgreen { background-color: yellowgreen;}.flex-lightgreen { background-color: lightgreen;}回答2：

其實(shí)可以的，使用浮動(dòng)和負(fù)邊距來做。但是，還需要一個(gè)額外的層來控制寬度，這樣就可以做到控制顯示每行顯示多少個(gè)item。具體請(qǐng)見：http://www.cnblogs.com/my_front_research/archive/2013/01/09/2853274.html，本文中負(fù)邊距部分。