在 3 个 div 上水平对齐 3 个元素答案

【问题标题】：Align horizontally 3 elements over 3 divs在 3 个 div 上水平对齐 3 个元素
【发布时间】：2017-06-22 16:51:23
【问题描述】：

我连续有 3 篇文章，每篇文章都有一个标题、一个描述和一个链接列表。内容的数量总是不同的，三个元素的高度是未知的。我正在尝试使用 flexbox 将相应的水平对齐。任何人都可以帮忙吗？这是一个例子：

<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

非常感谢！

【问题讨论】：

标签： alignment flexbox

【解决方案1】：

通过对您的标记进行微小的更改，删除 <div class="item"> 包装，您可以这样做。

在这里，我使用order 属性将item-title、item-description 和item-links 重新排序/分组到顶部、中间和底部块中，因此它们在每一行上的高度相同.

根据评论更新，带有媒体查询

* {
  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>

【讨论】：

酷，按描述工作。但是：由于每个前一个 .item 本身就是一篇文章，因此内部的 3 个元素需要一起属于一个单列布局。有什么建议吗？这就是我尝试使用包装元素的原因。
@tinusmile 但是它们都在 1 列中，我更新了我的答案并在每个元素中添加了数字 1-3，以便您可以清楚地看到
对不起，你误解了我的回答。对于这种连续 3 列的布局，这很好。但是在小屏幕上，文章将有 100% 的宽度，并且会垂直对齐......这就是为什么在每篇文章周围都有一个包装器会更好，对吧？你怎么看？
@tinusmile 不，你不能用包装器做你想做的事，我会在几分钟内更新我的答案
@tinusmile 更新...选择“整页”并调整浏览器窗口大小，您会看到它是如何工作的