css - flexbox 方向栏 : Align items with multiple heights

Question

请看下面的例子。

ul {
  display: flex;
}

li {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid green;
  justify-content: flex-start;
  align-items: center
}

ul, h3, h4, p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3 {
  margin-bottom: auto;
}

h4 {
  border-top: 1px solid green;
  margin-bottom: auto;
}

p {
  border-top: 1px solid green;
}

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
    <h4>h4</h4>
    <p>p</p>
  </li>
  <li>
    <h3>h3</h3>
    <h4>h4</h4>
    <p>p</p>
  </li>
  <li>
    <h3>h3</h3>
    <h4>h4</h4>
    <p>p<br>p</p>
  </li>
</ul>

我正在使用 ul li html 布局并应用类似的 flex-box 样式。问题是我必须修复这个 flex box，其中每个元素的顶部彼此对齐。我尝试使用 margin-bottom: auto，但由于高度不同，布局“变形”了。

谁能告诉我在这种情况下该怎么办？任何其他观点/方法将不胜感激。我的描述不是很好，有什么不明白的地方，尽管和我讨论。我真的需要你的帮助。

提前致谢!

---

更新

这张图片是我的预期结果:

Answer 1

您不能使用您提供的 HTML 执行此操作，因为 li 元素不会相互传达其内容大小。相反，您需要将所有内容分开，以利用自动缩放高度的优势。

为此，您必须将 li 元素分隔得比您已有的更多。

您可以使用 flex 做到这一点，但您需要更改 HTML 布局。

请看下面的例子:

/* Flexbox */

ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  width:33%;
}



/* Extra styles */

ul, h3, h4, p {
  margin: 0;
  padding: 0;
  width: 100%;
}

h3 {
  margin-bottom: auto;
}

h4 {
  border-top: 1px solid green;
  margin-bottom: auto;
}

p {
  border-top: 1px solid green;
}

<ul>
  <li>
    <h3>h3<br>h3<br>h3</h3>
  </li>
  <li>
    <h3>h3</h3>
  </li>
  <li>
    <h3>h3</h3>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <h4>h4</h4>
  </li>
  <li>
    <p>p</p>
  </li>
  <li>
    <p>p</p>
  </li>
  <li>
    <p>p<br>p</p>
  </li>
</ul>