使用flexbox对齐div.2 divs全宽和2 divs内联宽度的一半

Question

我正在尝试布局2个全宽度和2个半宽度的div(最后2个div应该在一行中).

HTML如下所示:

<div class="container">
    <div class="box--full">1</div>
    <div class="box--full">2</div>
    <div class="box--half">3</div>
    <div class="box--half">4</div>
</div>

CSS:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 200px;
    flex-flow: row wrap;
}

[class*="box--"] {
    display: flex;
    margin: .25rem;
    height: 2rem;
    padding: .25rem;
    color: white;
}

.box--full {
    background: red;
    flex: 1 1 100%;
}

.box--half {    
    background: blue;
    flex: 1 1 50%;
}

我想知道为什么最后两个div没有可用宽度的一半,为什么它们不在一行中.我想避免为最后2个div添加一个包装器.

我发现添加flex: 0 1 50%将所需的宽度应用于最后2个div,但它们仍然不是内联的.

是否可以在不制作额外包装的情况下使它们内联？

这是codepen的链接:http://codepen.io/sunpietro/pen/Mepmam

Answer 1

它们不在同一条线上,因为它们确实有margin,margins占用一点空间,所以你必须降低百分比:

* {
    box-sizing: border-box;
}

.container {
    display: flex;
    width: 200px;
    flex-flow: row wrap;
}

[class*="box--"] {
    display: flex;
    margin: .25rem;
    height: 2rem;
    padding: .25rem;
    color: white;
}

.box--full {
    background: red;
    flex: 1 1 100%;
}

.box--half {    
    background: blue;
    flex: 1 1 30%;
}

<div class="container">
    <div class="box--full">1</div>
    <div class="box--full">2</div>
    <div class="box--half">3</div>
    <div class="box--half">4</div>
</div>