http://jsfiddle.net/deathfang/6kSNV/1/
上面这种布局，可以用更简洁的HTML实现不？
比如这种
<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测试右边会有1px误差，手机扫描下面二维码可以看到
解决方案
当然可以， 既然你那么节约代码, 那么就不用选择使用ul了(还要去除默认样式).
实现的关键点在于:
- 父级
flex-wrap高为wrap (默认是nowrap) - 子元素有border的话, 把
box-sizing的值设为border-box
jsfiddle卡出翔了, 直接看代码吧：
HTML:
<div class="flex-container"> <div class="flex-item flex-gold">1</div> <div class="flex-item flex-red">2</div> <div class="flex-item flex-pink">3</div> <div class="flex-item flex-blue">4</div> <div class="flex-item flex-yellowgreen">5</div> <div class="flex-item flex-lightgreen">6</div></div>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;}