css3 - 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:

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

Answer 2

其實可以的，使用浮動和負邊距來做。
但是，還需要一個額外的層來控製寬度，這樣就可以做到控製顯示每行顯示多少個item。
具體請見：http://www.cnblogs.com/my_front_research/archive/2013/01/09/2853274.html，本文中负边距部分。