css - 将flex子项对齐到顶部

如何让flexbox子级垂直对齐到每一行的顶部边缘？

HTML:

#container {
  align-items: flex-start;
  align-content: flex-start;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.child {
  margin: auto;
  border: 1px dotted #CCC;
}
img, h3 {
  width: 160px;
}

<div id="container">
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>Title</h3>
  </div>
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>The quick brown fox jumps over the lazy dog</h3>
  </div>
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>Title</h3>
  </div>
  <div class="child">
    <img src="http://via.placeholder.com/160x160">
    <h3>Title</h3>
  </div>
</div>

演示:https://codepen.io/anon/pen/GOBzOp

我看到的是，但我希望它看起来像

最佳答案

将margin:auto的.child更改为margin: 0px auto。

关于css - 将flex子项对齐到顶部，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/47504822/