フレックス列が一致しません

フレックス行が2つあります。最初の行には6つの等しい列があり、flex: 1です。 2行目はflex: 4、列はflex:2です。行の最後の子を除いて、列にはmargin-right: 10pxが設定されています。フレックス列が一致しません

http://jsbin.com/gufihoyaha/edit?html,css,output

.row { 
 
    display: flex; 
 
} 
 

 
.row .col { 
 
    margin-right: 10px; 
 
    background-color: coral; 
 
} 
 

 
.row .col:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.flex-1 { 
 
    flex: 1; 
 
} 
 

 
.flex-4 { 
 
    flex: 4; 
 
} 
 

 
.flex-2 { 
 
    flex: 2; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
</head> 
 
<body> 
 
<div class="row"> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col flex-4">4</div> 
 
    <div class="col flex-2">2</div> 
 
</div> 
 
</body> 
 
</html>

しかし、結果は私が期待したものとは異なります

：

私が欲しいもの、このようなものです0

質問： なぜそれが解決されますか？

出典

2017-05-29 Sergey Goliney

のみdisplay:grid実際にこれを正しく行うことができるようになります。

残念ながら、現時点では、それは静かで、新規および実装されていないすべての場所です。それについての詳細を知るためにはhttp://caniuse.com/#search=grid

を参照してください：https://css-tricks.com/snippets/css/complete-guide-grid/

.row { 
 
    display: grid; 
 
    grid-template-columns: repeat(6, 1fr); 
 
} 
 

 
.row .col { 
 
    background-color: coral; 
 
    margin-right: 10px; 
 
} 
 

 
.row .col:last-child { 
 
    margin-right: 0; 
 
} 
 

 
.flex-1 {} 
 

 
.flex-4 { 
 
    grid-column: auto/span 4; 
 
} 
 

 
.flex-2 { 
 
    grid-column: auto/span 2; 
 
}

<div class="row"> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
    <div class="col flex-1">1</div> 
 
</div> 
 
<div class="row"> 
 
    <div class="col flex-4">4</div> 
 
    <div class="col flex-2">2</div> 
 
</div>

出典

2017-05-29 09:14:50

フレックス列が一致しません

答えて

関連する問題