如何使用 flexbox 每行显示 2 列

Question

我试图每行显示 2 列，但目前似乎无法正确显示。

我要复制的是：

但我不确定如何使用 flexbox 来处理这个问题

 .flex {
  display: flex;
  flex-direction: row;
  flex-basis: 100%;
  flex: 1;
}

.box {
  padding: 20px;
  border: 1px solid black;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

 <div class="flex">
  <div class="box green">positive 1</div>
  <div class="box yellow">positive 2</div>
  <div class="box blue">positive 3</div>
  <div class="box red">negative 1</div>
</div>

https://jsfiddle.net/1a9qLx5w/

原文由 deathknight256 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

实现这种布局的最佳方式是使用 Grid CSS：

 .flex {
  display: grid;
  grid-auto-flow: column;
  grid-gap: 20px;
  grid-template-rows: 100px 100px;
  grid-template-columns: 100px 100px;
  padding: 10px;
}

.box {
  padding: 20px;
  border: 1px solid black;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

* {
  box-sizing: border-box;
}

 <div class="flex">
  <div class="box green">positive 1</div>
  <div class="box yellow">positive 2</div>
  <div class="box blue">positive 3</div>
  <div class="box red">negative 1</div>
</div>

但是既然你要求的是 flexbox 解决方案，那么你可以这样做：

 .flex {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 240px;
  align-content: flex-start;
}

.box {
  flex: 0 0 100px;
  width: 100px;
  padding: 20px;
  border: 1px solid black;
  margin: 10px;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

* {
  box-sizing: border-box;
}

 <div class="flex">
  <div class="box green">positive 1</div>
  <div class="box yellow">positive 2</div>
  <div class="box blue">positive 3</div>
  <div class="box red">negative 1</div>
</div>

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我只是复制了你的例子：

 .row{
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.green{
  padding: 15px;
  border: solid 1px green;
}
.red{
  padding: 15px;
  border: solid 1px red;
}
.col{
  margin-right: 15px;
}

 <div class="row">
  <div class="col">
    <p class="green">Positive 1</p>
    <p class="green">Positive 2</p>
  </div>
  <div class="col">
    <p class="red">No Thanks</p>
  </div>
</div>

原文由 Samuel John Orias 发布，翻译遵循 CC BY-SA 4.0 许可协议