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>
但结果跟我想象的不同:
我想是这样的:
问题: 为什么会发生这种情况,以及如何解决这个问题?