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