Flex 列不匹配 [重复]答案

【问题标题】：Flex columns do not match [duplicate]Flex 列不匹配 [重复]
【发布时间】：2017-05-29 21:31:52
【问题描述】：

我有两个 flex 行。第一行有 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>

但结果与我的预期不同：

我想要的是这样的：

问题： 为什么会发生这种情况以及如何解决？

【问题讨论】：

标签： html css flexbox

【解决方案1】：

实际上只有display:grid 能够正确执行此操作：

不幸的是，此时，它是安静的新事物，并没有在所有地方实施。见http://caniuse.com/#search=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>

【讨论】：