至少两行使用带有行内块的列宽

Question

我正在尝试将内联块分成几列，从每一列中的一项开始。取而代之的是，它最初在一个列中给了我两个块。我该怎么做才能改变行为？

http://jsfiddle.net/fuqrwe64/10/

<style>
.container {
  background: #f99;
  column-width: 130px;
}

.item {
  background: #9f9;
  width: 130px;
  height: 40px;
  margin: 5px;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2em;
  font-family: monospace;
}
</style>

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
  <div class="item">D</div>
  <div class="item">E</div>
  <div class="item">G</div>
  <div class="item">H</div>
  <div class="item">I</div>
  <div class="item">F</div>
</div>

Answer 1

使用column-count CSS属性

.item{
column-count:3;
}

，如果要设置宽度，可以使用column-gap属性设置

Answer 2

尝试一下

  .container {
  background: #f99;
  width:280px;
  display: flex;
  text-align: center;
  align-items: center;
  flex-wrap:wrap;
}

.item {
  background: #9f9;
  width: 130px;
  height: 220px;
  margin: 5px;
  justify-content: center;
  font-size: 2em;
}

我希望这就是你想要的。如果不是，请让我知道确切的要求。