Align horizontally 3 elements over 3 divs

问题

I have 3 articles in a row that have each a title, a description and a link list. The amount of content is always different, heights of the 3 elements are unknown. I am trying to align the corresponding ones horizontally to each other using flexbox. Anyone can help? Here's an example:

<html>
<head>
    <title>Horizontal Alignment</title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0; }

        li {
            list-style: none; }

        * {
            box-sizing: border-box; }

        .item-container {
            display: flex;
            flex-wrap: wrap; }

        .item {
            width: 33.3%;
            border: 1px dashed black;
            display: flex;
            flex-direction: column; }

        .item-title {
            background: red;
            flex: 1 0 auto; }

        .item-description {
            background: orange; }

        .item-links {
            background: yellow; }

    </style>
</head>
<body>
    <section class="item-container">
        <div class="item">
            <h2 class="item-title">Lorem ipsum dolor sit amet</h2>
            <p class="item-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            <ul class="item-links">
                <li>Link A</li>
                <li>Link B</li>
                <li>Link C</li>
                <li>Link D</li>
                <li>Link E</li>
                <li>Link F</li>
            </ul>
        </div>
        <div class="item">
            <h2 class="item-title">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2>
            <p class="item-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
            <ul class="item-links">
                <li>Link A</li>
                <li>Link B</li>
                <li>Link C</li>
            </ul>
        </div>
        <div class="item">
            <h2 class="item-title">Lorem ipsum dolor sit amet</h2>
            <p class="item-description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </p>
            <ul class="item-links">
                <li>Link A</li>
                <li>Link B</li>
            </ul>
        </div>
    </section>

</body>
</html>

Copepen

Thanks a lot!

回答1:

By making a minor change in your markup, removing the <div class="item"> wrapper, you can do like this.

Here I used the order property to re-order/group the item-title, item-description, and item-links in a top, middle and bottom block, and as such they will have equal heights on each row.

Updated based on a comment, with a media query

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
* {
  box-sizing: border-box;
}
.item-container {
  display: flex;
  flex-wrap: wrap;
}
.item-container > * {
  width: 100%;
  border: 1px dashed black;
}
.item-title {
  background: red;
}
.item-description {
  background: orange;
}
.item-links {
  background: yellow;
}

@media screen and (min-width: 700px) {

  .item-container > * {
    width: 33.3%;
  }

  .item-container > h2 {
    order: 1;
  }
  .item-container > p {
    order: 2;
  }
  .item-container > ul {
    order: 3;
  }

}

<section class="item-container">

  <h2 class="item-title">1 Lorem ipsum dolor sit amet</h2>
  <p class="item-description">1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <ul class="item-links">
    <li>1 Link A</li>
    <li>Link B</li>
    <li>Link C</li>
    <li>Link D</li>
    <li>Link E</li>
    <li>Link F</li>
  </ul>
  
  <h2 class="item-title">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. </h2>
  <p class="item-description">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <ul class="item-links">
    <li>2 Link A</li>
    <li>Link B</li>
    <li>Link C</li>
  </ul>

  <h2 class="item-title">3 Lorem ipsum dolor sit amet</h2>
  <p class="item-description">3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
  <ul class="item-links">
    <li>3 Link A</li>
    <li>Link B</li>
  </ul>
</section>

来源：https://stackoverflow.com/questions/42056054/align-horizontally-3-elements-over-3-divs

标签

alignment

flexbox