让 flexbox 像引导列一样流动

Question

我正在尝试使用具有相同高度的排水沟进行三列设置。我目前正在尝试使用 flexbox 执行此操作，但我遇到的问题是，如果一行最终有两列，justify-content: space-between; 在中间会产生一个间隙，而不是像引导列那样从左到右流动。我认为这可以通过align-content: flex-start; 完成，但我要么使用错误，要么无法按照我尝试使用它的方式工作。 有没有办法让 flexbox 使用排水沟之间的空间但保持从左到右的流动？这是一个链接，用于显示我遇到的问题以及我希望它的外观。

http://codepen.io/anon/pen/jWvqdL

另外，有没有一种方法可以将 flexbox 与 bootstrap 的填充和列宽 % 设置一起使用，然后在列内有一个 100% 高度的子元素？

Answer 1

这是一个可以满足您的需求的版本。

它显示了 2 列和 3 列布局，只有 2 条额外的 CSS 规则

.container2,
.container3 {
  max-width: 840px;
  margin: 0 auto;
  border-right: 1px solid red;
  border-left: 1px solid red;
}
.flex {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.container3 .column {
  box-sizing: border-box;
  margin-bottom: 12px;
  width: calc(33.33% - 8px);
  background: #000;
}
.container3 .column:nth-child(3n+2),
.container3 .column:nth-child(3n+3) {
  margin-left: 12px;
}
.column-content {
  padding: 20px;
  color: #fff;
}

.container2 .column {
  box-sizing: border-box;
  margin-bottom: 12px;
    width: calc(50% - 6px);
  background: #000;
}
.container2 .column:nth-child(2n+2) {
  margin-left: 12px;
}

<div class="container3">
  <div class="flex">
    <div class="column">
      <div class="column-content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
  </div>
</div>

<hr>

<div class="container2">
  <div class="flex">
    <div class="column">
      <div class="column-content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
  </div>
</div>

---

基于混合列的 cmets 更新

    .container {
      max-width: 840px;
      margin: 0 auto;
    }
    .flex {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 40px;
      margin-left: -12px;
    }
    .column {
      box-sizing: border-box;
      margin-bottom: 12px;
      margin-left: 12px;
      background: #000;
    }
    .column-content {
      padding: 20px;
      color: #fff;
    }

    .col2 {
        width: calc(50% - 12px);
    }
    .col3 {
        width: calc(33.333% - 12px);
    }        
    .col4 {
        width: calc(25% - 12px);
    }

<div class="container">
  <div class="flex">
  
    <div class="column col3">
      <div class="column-content">
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
    <div class="column col3">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column col3">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>

    <div class="column col2">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column col2">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>

    <div class="column col2">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column col4">
      <div class="column-content">
        <p>Content</p>
      </div>
    </div>
    <div class="column col4">
      <div class="column-content">
        <p>Content</p>
        <p>Content</p>
      </div>
    </div>
    
  </div>
</div>

Answer 2

一种方法是删除justify-content 并使用margin 管理装订线，然后使用:nth-child(n) 选择器选择性地删除边距以使元素适合。 http://codepen.io/anon/pen/QyVEJZ

Answer 3

解决此问题的一种方法是包含一个“幻像”div 作为 visibility: hidden 的最后一个子元素。

我已从您的代码中复制了第一个弹性项目并将其粘贴为容器中的最后一个项目。我添加了一个hidden 类。

<div class="column hidden">
  <div class="column-content">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>

然后在你的 CSS 中：

.hidden { visibility: hidden; }

Revised Codepen

有关其他选项，请参阅此答案：https://stackoverflow.com/a/34930349/3597276

---

align-content: flex-start 无法按预期工作的原因是align-* 属性沿交叉轴工作。在这种情况下，因为您的 flex 容器是 flex-direction: row，所以横轴是垂直的。所以align-content、align-items 和align-self 会向上/向下移动你的弹性项目，而不是左右移动。

有关主轴/交叉轴的说明，以及有关align-* 属性的更多详细信息，请参见此处：In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

Answer 4

这就是我决定这样做的方式。我正在使用标准引导程序设置，列上的填充和父级上的负边距，但将display: flex; 设置为父级，将flex-wrap: wrap; 列设置为父级。这样，我可以使用 boostrap 列的百分比宽度并且与 flex 具有相同的高度。 http://codepen.io/anon/pen/wMExMJ