css - Chrome 中的不平衡 CSS 列

Question

我想使用 CSS columns 在多个列中动态显示一些 Bootstrap 列表组，但我在 Chrome 中遇到了一些奇怪的间距问题。 Firefox 完美运行。看起来正是问题this guy had ，但他从未得到答案，可能是因为他没有提供一个很好的例子。所以我会提供一个很好的例子。

CSS(在 Bootstrap 之后加载):

.columns {
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
  width:  100%;      
}

HTML:

<div class="columns">
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Morbi leo risus</li>
  </ul>
  <ul class="list-group">
    <li class="list-group-item">Porta ac consectetur ac</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Here it is on Bootply.在 Firefox 中一切都很好:前 3 个列表组在第一列，接下来的 3 个在第二列。但是在 Chrome 中，前 4 个列在第一列中，第二列非常短，只有 2 个。我怎样才能让它平衡？

(我还观察到 the same question I linked to above 中描述的另一个问题，有时 Chrome 会在列下方创建一个很大的边距，但我稍后会把它留给一个单独的问题。)

Answer 1

这可能是个愚蠢的问题，但您是否研究过 flexbox？

.columns {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
  -webkit-column-width: 200px;
     -moz-column-width: 200px;
          column-width: 200px;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
  width: 600px;
}

.list-group {
  display: inline-block;
      width: 300px;
}

编辑 经历了未回答的问题，却没有意识到这已经有多久了。