CSS布局flex问题

Question

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误差，手机扫描下面二维码可以看到

Answer 1

当然可以， 既然你那么节约代码, 那么就不用选择使用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;
}

Answer 2

其实可以的，使用浮动和负边距来做。
但是，还需要一个额外的层来控制宽度，这样就可以做到控制显示每行显示多少个item。
具体请见：http://www.cnblogs.com/my_front_research/archive/2013/01/09/2853274.html，本文中负边距部分。