html - 不同大小的盒子不会与 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