Flex-Kinder nach oben ausrichten

Question

Wie kann ich Flexbox-Kinder vertikal an die Oberkante jeder Zeile ausrichten?

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>

Demo: https://codepen.io/anon/pen/GOBzOp

Was ich sehe, ist aber ich will es wie margin:auto von

Answer 1

Änderungaussehen 210 bis margin: 0px auto.

Answer 2

können Sie versuchen, wie

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

Answer 3

justify-content: space-around; zu #container id Geben statt justify-content: space-between; und margin: auto;-.child Klasse entfernen.

#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

Eine einfache Lösung wäre margin: auto;-margin: 0 auto; sich ändern diese die Box automatisch vertikal zentralisieren verhindern, aber ihre horizontale Ausrichtung beibehalten, etwa so:

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