フレックスの子を一番上に整列する

Question

フレックスボックスの子を各行の上端に垂直に整列させるにはどうすればよいですか？

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の

Answer 1

変更に見えるようにしたいです210〜margin: 0px auto。

Answer 2

あなたはjustify-content: space-around;#containerへのidの代わりjustify-content: space-between;を与え、margin: auto;.childにクラスを削除

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

Answer 3

のように試すことができます。

#container { 
 
    align-items: flex-start; 
 
    align-content: flex-start; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
} 
 
.child { \t 
 
    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>

Answer 4

簡単な修正はそうのように、これは箱の自動縦に集中できなくなりmargin: 0 auto;にmargin: auto;を変更するが、その水平方向の配置を保持することになります。

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