Question

我有两个弹性行。第一行有6个相等的列，flex: 1。第二行的列为flex: 4，列为flex:2。列设置margin-right: 10px，但连续的最后一个子项除外。

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

＆＃13;

.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;
}

＆＃13;

<!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>

＆＃13;

但结果与我的预期不同：

我想要的是这样的：

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

Answer 1

只有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>

Flex列不匹配

1 个答案: