Aligning the child elements of different parent containers

问题

I'm trying to vertically align variable height elements across containers, i.e. the 1st element in each container aligns vertically with each other, the 2nd element in each container aligns vertically with each other, etc., etc.

I'm using flexbox but not sure if this is even possible? Or is it possible using CSS Grid?

Desired outcome

See demo where I haven't managed to get it working yet.

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>

回答1:

Maybe grid with display: contents helps you.

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

Maybe additional child elements are nesessary if the original .container styles are important.

回答2:

Try this, maybe it help you

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

Live demo - http://codepen.io/anon/pen/oZxaja?editors=1100

回答3:

To answer the question directly, I don't think you're going to be able to do what you are trying with your HTML structure and just using CSS/flexbox. I can think of way to do it with JS but what a pain that would be.

If you can, I think you'd have a much easier time restructuring your HTML so that the tops, middles, and bottoms are all in their own rows. You can still have the containers inside the rows to get the look you're going for and create this dynamically, etc, but to get the alignment this seems much easier to me...

.row {
  display: flex;
  flex-direction: row;
}

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

.top {
  background: red;
}

.middle {
  background: blue;
}

.bottom {
  background: green;
}

<main>
  <div class="row">
    <div class="container">
      <div class="top">Some text here, Some text here, Some text here</div>
    </div>
    <div class="container">
      <div class="top">Some text here, Some text here</div>
    </div>
  </div>
  
  <div class="row">
    <div class="container">
      <div class="middle">And some here, And some here, And some here, And some here, And some here, And some here</div>
    </div>
    <div class="container">
      <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>
  </div>
  
  <div class="row">
    <div class="container">
      <div class="bottom">And a little here too</div>
    </div>
    <div class="container">
      <div class="bottom">And a little here too, And a little here too</div>
    </div>
  </div>
</main>

来源：https://stackoverflow.com/questions/42578410/aligning-the-child-elements-of-different-parent-containers

标签

html

css

flexbox

css-grid