将弹性儿童对齐到顶部

Question

如何让flexbox子项垂直排列到每行的上边缘？

HTML：

＆＃13;

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

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

Answer 1

将var oModel = sap.ui.model.odata.v2.ODataModel("Service_URL",{ json:true }); 的{​​{1}}更改为margin:auto。

Answer 2

将justify-content: space-around;提供给#container ID，而不是justify-content: space-between;，并将margin: auto;移至.child类。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

一个简单的修复方法是将margin: auto;更改为margin: 0 auto;，这样可以防止框自动垂直集中但保留其水平对齐方式，如下所示：

.child {
    border: 1px dotted #CCC;
    margin: 0 auto;
}

Answer 4

你可以尝试

.child {
    vertical-align: baseline; //either of them
    margin: 0px auto; // any one
}