如何使元素按父级的高度在列中流动

Question

问题：如何在列中布局项目，它们将填充该列，然后包装。

实时代码：https://codepen.io/matthewharwood/pen/NWxqXVv

​

.column-wrapper {
  height: 250px;
  background: #000;
  color: #fff;
  display: flex;
}
.column-element {
  padding: 12px;
}
h1 {
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #cacaca;
  opacity: .75;
  font-size: 12px;
}
p {
  font-family: sans-serif;
  font-size: 16px;
  margin: 4px 0;
}

<div class="column-wrapper">
  <div class="column-element">
    <h1>Collaborators</h1>
    <p>Joe</p>
    <p>Karen</p>
    <p>Randy</p>
  </div>
  <div class="column-element">
    <h1>Company</h1>
    <p>R/GA</p>
    <p>Uber</p>
  </div>
  <div class="column-element">
    <h1>Technology</h1>
    <p>React</p>
    <p>FusionJS</p>
    <p>Styletron</p>
    <p>Baseweb</p>
    <p>Webpack</p>
    <p>Cloudinary</p>
  </div>
  <div class="column-element">
    <h1>Profession</h1>
    <p>Software Engineer</p>
    <p>Designer</p>
    <p>HR</p>
    <p>CEO</p>
    <p>CTO</p>
  </div>
  <div class="column-element">
    <h1>Dates</h1>
    <p>June 3 2018 ~ Aug 28 2018</p>
  </div>
    <div class="column-element">
    <h1>My Role</h1>
    <p>Software Engineer</p>
  </div>
</div>

​

想要的布局：

​

​

注意:如果'.column-element'内部<p />或<h1 />中断到下一列，我希望它们转到下一列。因此，使用column-count是行不通的。

​

Answer 1

对CSS属性执行以下更改：

.column-wrapper {
    height: 250px;
    background: #000;
    color: #fff;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
}

​

.column-wrapper {
  height: 250px;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.column-element {
  padding: 12px;
}
h1 {
  font-family: sans-serif;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #cacaca;
  opacity: .75;
  font-size: 12px;
}
p {
  font-family: sans-serif;
  font-size: 16px;
  margin: 4px 0;
}

<div class="column-wrapper">
  <div class="column-element">
    <h1>Collaborators</h1>
    <p>Joe</p>
    <p>Karen</p>
    <p>Randy</p>
  </div>
  <div class="column-element">
    <h1>Company</h1>
    <p>R/GA</p>
    <p>Uber</p>
  </div>
  <div class="column-element">
    <h1>Technology</h1>
    <p>React</p>
    <p>FusionJS</p>
    <p>Styletron</p>
    <p>Baseweb</p>
    <p>Webpack</p>
    <p>Cloudinary</p>
  </div>
  <div class="column-element">
    <h1>Profession</h1>
    <p>Software Engineer</p>
    <p>Designer</p>
    <p>HR</p>
    <p>CEO</p>
    <p>CTO</p>
  </div>
  <div class="column-element">
    <h1>Dates</h1>
    <p>June 3 2018 ~ Aug 28 2018</p>
  </div>
    <div class="column-element">
    <h1>My Role</h1>
    <p>Software Engineer</p>
  </div>
</div>

​

​

​