使用带有内联块的column-width最少两行

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

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