不同尺寸的盒子不会与flex对齐

Question

我得到一条25％，25％和50％的盒子。下一行我有两个50％的盒子。我使用flex来对齐它们。但是第1行不会像第2-4行那样对齐。

Example

.line {
    display: flex;
}
.line .col {
    margin: 5px;
}
.line .col-3 {
    width: 25%;
}
.line .col-6 {
    width: 50%;
}
.line .col-12 {
    width: 100%
}

Answer 1

仅仅因为与两个元素相比，单个元素的边距更低。试试这个：

.line .col {
    padding: 0 5px;
    box-sizing: border-box;
    margin-bottom: 10px;
}

<强> JSFiddle