具有相等高度/对齐顶部的子元素的 Flexbox 列

Question

我的应用中有一个 flexbox 布局，类似于下面的 sn-p，一组 lis 和三个 divs

.container {
  width: 500px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}
li {
  border: solid 1px black;
  flex: 1;
}
.title {
  border: solid 1px red;
  margin-bottom: 1em;
}
.content {
  border: solid 1px yellow;
  margin-bottom: 1em;
}
.footer {
  border: solid 1px blue;
}

<div class="container">

  <ul>
    <li>
      <div class="title">
        Blah Blah Blah Blah Blah Blah
      </div>
      <div class="content">
        Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="footer">
        Some other stuff here
      </div>
    </li>
    <li>
      <div class="title">
        Blah Blah Blah Blah Blah Blah
      </div>
      <div class="content">
        Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="footer">
        Some other stuff here
      </div>
    </li>
    <li>
      <div class="title">
        Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="content">
        Blah Blah Blah Blah Blah Blah Blah Blah
      </div>
      <div class="footer">
        Some other stuff here
      </div>
    </li>
  </ul>
</div>

我希望孩子 div 在各个时代都以相同的级别开始，例如黄色 div 顶部相等，蓝色 div 顶部相等。以前我通过使子 div 绝对定位来做到这一点，然后让它们具有固定的高度和固定的顶部。但是，这样做，我必须根据猜测的它们将包含的文本的最大大小来设置高度，当与响应的页面结合时（有一个断点，它从并排的列到轮播） ，这会导致列中出现大量空白。

我发现的大多数示例（因为我显然不知道谷歌搜索的正确术语...）涉及 Javascript，或重新排列标记以使行位于层次结构的顶部，而不是列。我想坚持使用列，它们被设置为处理 1、2 或 3 列的情况，并且还用作小型设备上的轮播。

我是否错过了如何做到这一点，还是我被 Javascript 卡住了？

Answer 1

您正在寻找display:flex-box。这是一些文档：https://css-tricks.com/snippets/css/a-guide-to-flexbox/。

我已经了解了您目前的情况，需要指出的一件事是您将需要同时使用两个 flex 方向（行和列）。

另一种情况是，如果您使用边框并试图让框沿一行对齐，您将需要引入 box-sizing:border-box （包括边框和填充到声明的宽度）。我还对列的宽度进行了计算，以使用行中可用的最大空间量，从而减少任何猜测。

您可以将此应用于您的需求：

        .container * {
            box-sizing: border-box;
        }
            .container {
                width: 500px;
            }
                ul {
                    list-style: none;
                    margin: 0;
                    padding: 0;
                    display: -webkit-box;
                    display: -moz-box;
                    display: -ms-flexbox;
                    display: -webkit-flex;
                    display: flex;
                    -webkit-flex-wrap: wrap;
                    flex-wrap: wrap;
                    flex-direction: row;
                    align-items: stretch;
                    justify-content: center;
                }
                    li {
                        width: calc(100% / 3);
                        border: solid 1px black;
                        box-sizing: border-box;
                        display: -webkit-box;
                        display: -moz-box;
                        display: -ms-flexbox;
                        display: -webkit-flex;
                        display: flex;
                        -webkit-flex-wrap: wrap;
                        flex-wrap: wrap;
                        flex-direction: column;
                        align-items: center;
                        justify-content: space-between;
                    }
                        li > div {
                            width: 100%;
                            padding: 0;
                            margin: 0;
                        }
                        li > div + div {
                            margin-top: 20px;
                        }
                        .title {
                            border: solid 1px red;
                        }
                        .content {
                            border: solid 1px yellow;
                        }
                        .footer {
                            border: solid 1px blue;
                        }

    <div class="container">
        <ul>
            <li>
                <div class="title">
                    Blah Blah Blah Blah Blah Blah
                </div>
                <div class="content">
                    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                </div>
                <div class="footer">
                    Some other stuff here
                </div>
            </li>
            <li>
                <div class="title">
                    Blah Blah Blah Blah Blah Blah
                </div>
                <div class="content">
                    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                </div>
                <div class="footer">
                    Some other stuff here
                </div>
            </li>
            <li>
                <div class="title">
                    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
                </div>
                <div class="content">
                    Blah Blah Blah Blah Blah Blah Blah Blah
                </div>
                <div class="footer">
                    Some other stuff here
                </div>
            </li>
        </ul>
    </div>

Answer 2

如果您将 HTML 标记更改为此（删除 ul li），您可以使用 Flexbox 执行此操作。您可以在每个项目上设置flex: 0 0 33% 和flex-wrap: wrap，这样当 flexbox 将项目包装到新行时，它将保持每行中项目的相同高度。然后，您需要使用nth-child() 选择器将元素的顺序调整为列。

* {
  box-sizing: border-box;
}
.container {
  width: 500px;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
}
div > div {
  flex: 0 0 33%;
}
div > div:nth-child(3n-2) {
  order: 1;
}
div > div:nth-child(3n-1) {
  order: 2;
}
div > div:nth-child(3n) {
  order: 3;
}
.title {
  border: solid 1px red;
  margin-bottom: 1em;
}
.content {
  border: solid 1px yellow;
  margin-bottom: 1em;
}
.footer {
  border: solid 1px blue;
}

<div class="container">
  <div class="title">
    Blah Blah Blah Blah Blah Blah
  </div>
  <div class="content">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="footer">
    Some other stuff here
  </div>

  <div class="title">
    Blah Blah Blah Blah Blah Blah
  </div>
  <div class="content">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="footer">
    Some other stuff here
  </div>
  <div class="title">
    Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="content">
    Blah Blah Blah Blah Blah Blah Blah Blah
  </div>
  <div class="footer">
    Some other stuff here
  </div>
</div>