Horizontaler Ausrichtungstext unterhalb von Flex-Elementen

Question

Die Bildbeschriftungen werden in einer Galerie, in der Bilder unterschiedliche Höhen haben, von Flexbox nach unten ausgerichtet. Wie kann ich erreichen, dass die ersten Textzeilen (Titel) horizontal ausgerichtet sind?

<style type="text/css"> 

    * { 
     box-sizing: border-box; } 

    .flex-container { 
     display: flex; 
     flex-wrap: wrap; } 

    .flex-item { 
     width: 50%; 
     padding: 20px; 
     display: flex; 
     flex-direction: column; } 

    .flex-item img { 
     width: 100%; 
     height: auto; } 

    .flex-image { 
     flex: 1 0 auto; } 

</style> 

<div class="flex-container"> 

    <div class="flex-item"> 
     <div class="flex-image"> 
      <img src="img-1.jpg" alt="" /> 
     </div> 
     <p>title</p> 
    </div> 

    <div class="flex-item"> 
     <div class="flex-image"> 
      <img src="img-2.jpg" alt="" /> 
     </div> 
     <p>title<br>Lorem ipsum dolor sit amet.</p> 
    </div> 

</div> 

Bitte überprüfen Sie meine codepen: https://codepen.io/tinusmile/pen/MoeORG

Vielen Dank!

Answer 1

Mit dem vorhandenen Markup, wo die Bilder unterschiedliche Höhen haben können, müssen Sie etwas tun, wo Sie die eine Höhe geben.

Da der Überlauf eines Elements standardmäßig visible ist, wird es aus seinen Grenzen fließen, daher empfehle ich, die Höhe einzustellen, damit es 2-3 Zeilen Text aufnehmen kann.

Auf kleineren Bildschirmen müssen Sie möglicherweise eine @media Abfrage hinzuzufügen, dass die Höhe einzustellen, als ob der Text ist sehr lang, es könnte jedes Element überfluten unter sich.

.flex-item p { 
    height: 50px; } 

Updated codepen

---

Hinweis, mit min-height stattdessen würde die lösen könnte unter sich jedes Element überfluten Problem, obwohl es die erste Zeile nicht horizontal machen auszurichten, wenn der Wert anzupassen nicht alle möglichen Zeilen.

---

Eine weitere Option ist die flex-item Wrapper zu entfernen und Flexbox des order Eigenschaft verwenden, wie ich in einer früheren Frage von Ihnen vorgeschlagen, align-horizontally-3-elements-over-3-divs