2
我有兩個柔性行。第一行有6個與flex: 1
相等的列。第二行的列爲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>
但結果跟我想象的不同:
我想是這樣的:
問題: 爲什麼會發生這種情況,以及如何解決這個問題?