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

Of course, since you save code so much, there is no need to choose to use ul (and remove the default style).
The key points of implementation are:

• Parentflex-wrapHigh is wrap (default is nowrap)
If the
• child element has a border, set the value of box-sizing to border-box

jsfiddleThe card is stuck, just look at the code:

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

Actually, you can do it using floats and negative margins.
However, an additional layer is needed to control the width, so that you can control how many items are displayed in each row.
For details, please see: http://www.cnblogs.com/my_front_research/archive/2013/01/09/2853274.html，本文中负边距部分。