html - 将 div 与 flexbox 对齐。 2 个 div 全宽和 2 个 div 在宽度的一半内联

Question

我正在尝试制作 2 个全宽 div 和 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，而margin占用了一点空间，所以你必须降低百分比:

* {
    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>