如何阻止 CSS flex 列填充三列行的宽度？ [复制]答案

【问题标题】：How to stop CSS flex column from filling width in three-columns row? [duplicate]如何阻止 CSS flex 列填充三列行的宽度？ [复制]
【发布时间】：2020-07-29 13:24:56
【问题描述】：

我有一个应该包含三列的 flex 行。每行三列看起来不错，但是当一行中有两列时，第二列被推到行的右侧，如下图所示。

从图中，红线表示我希望如何放置所有列。

行有这个 CSS：

display: flex;
justify-content: space-between;
flex-flow: row wrap;

虽然列有这个 CSS：

display: flex;
flex-direction: column;

另外，使用Bootstrap 4，行使用row类，列使用col类

如何将两列保持在与三列相同的位置？

【问题讨论】：

标签： html css bootstrap-4

【解决方案1】：

要使用 flexbox 执行此操作，您可以尝试使用 justify-content: flex-start;。要获得每行 3 列，请将flex-basis: ~30%; 应用于弹性项目。像这样的：

 .container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.block {
  background-color: grey;
  flex-basis: 30%;
  margin: 5px;
}

JSfiddle

希望对你有帮助！

【讨论】：