对齐不同父容器的子元素

Question

我正在尝试跨容器垂直对齐可变高度元素，即每个容器中的第一个元素彼此垂直对齐，每个容器中的第二个元素彼此垂直对齐，等等。

我正在使用 flexbox 但不确定这是否可能？或者是否可以使用 CSS Grid？

期望的结果

请参阅我尚未设法使其工作的演示。

main {
  display: flex;
  flex-wrap: wrap;
}

.container {
  background: grey;
  margin: 0 10px 20px;
  padding: 10px;
  width: 200px;
}

.top {
  background: red;
}

.middle {
  background: blue;
}

.bottom {
  background: green;
}

<main>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too, And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here, Some text here, Some text here</div>
    <div class="middle">And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
  <div class="container">
    <div class="top">Some text here, Some text here, Some text here</div>
    <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    <div class="bottom">And a little here too</div>
  </div>
</main>

Answer 1

也许带有显示的网格：内容可以帮助您。

main {
  display: grid;
  
  grid-auto-columns: 200px;
  column-gap: 20px;
}

.container {
  display: contents;
}

.top {
  grid-row: 1;
}

.middle {
  grid-row: 2;
}

.bottom {
  grid-row: 3;
}

https://codepen.io/sunnyone/pen/dyGQYBv

如果原始 .container 样式很重要，则可能需要额外的子元素。

Answer 2

试试这个，也许对你有帮助

.container {
  background: grey;
  margin: 0 10px 20px;
  padding: 10px;
  width: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

现场演示 - http://codepen.io/anon/pen/oZxaja?editors=1100