flex eigenschaft meses taste die taste höhe?

Question

Ich benutze ein Flex-Layout und ich liebe einfach, wie es funktioniert, aber ich habe eine Schwierigkeit in der Layout-Eigenschaft.

Ich benutze Bootstrap und ein Layout mit Flex.

Momentan nimmt die Schaltfläche die Höhe des Containers an. Es gibt eine Menge Platz unter dem Text und ich möchte es entfernen und wenn ich Padding hinzufügen, wird seine Größe ungleichmäßig. Ich habe versucht, die Größe nach Zeilenhöhe anzupassen, aber ich versuche, die tatsächliche Lösung und den Grund zu finden, warum ich dieses Problem habe.

Alles, was ich hier mit flex vermisse oder ist es etwas anderes? Jede Hilfe wird sehr geschätzt. Danke.

.vessel-card { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.vessel-card h3 { 
 
    margin: 0; 
 
    padding: 20px 0; 
 
} 
 
.departure-card { 
 
    display: flex; 
 
    padding: 20px 0; 
 
    border-top: 2px solid #888; 
 
} 
 
.departure-card p { 
 
    margin-right: 10px; 
 
} 
 
.departure-card:last-child { 
 
    border-bottom: 2px solid #888; 
 
} 
 
.departure-card .btn-explore { 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
    color: #000; 
 
    border-radius: 0; 
 
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 vessel-card"> 
 
     <a href="cienfuegos-from-havana.html" class="special-departure"> 
 
     <img src="http://placehold.it/350x150"> 
 
     </a> 
 
     <h3>Vessel: Panorama</h3> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999</p> 
 
     <a href="#" class="btn btn-explore">Explore</a> 
 
     </div> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999</p> 
 
     <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Flexbox Artikel gleichen height wie Sie hier Demo sehen können, aber Sie können align-items verwenden, die oder in Ihrem Fall Demo

.parent { 
 
    align-items: center; 
 
    display: flex; 
 
} 
 

 
.child { 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
} 
 

 
.child:first-child { 
 
    height: 100px; 
 
}

<div class="parent"> 
 
    <div class="child">Child</div> 
 
    <div class="child">Child</div> 
 
</div>

zu ändern

Answer 2

Sie müssen auf die Schaltfläche im Absatz aufzunehmen. Ich habe auch eine padding auf die Schaltfläche 5px enthalten, so dass die Box nicht so nah an den Text ist, aber der Wert kann geändert werden, um Ihren Bedürfnissen gerecht zu werden, oder vollständig entfernt, wenn unerwünscht.

.vessel-card { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.vessel-card h3 { 
 
    margin: 0; 
 
    padding: 20px 0; 
 
} 
 
.departure-card { 
 
    display: flex; 
 
    padding: 20px 0; 
 
    border-top: 2px solid #888; 
 
} 
 
.departure-card p { 
 
    margin-right: 10px; 
 
} 
 
.departure-card:last-child { 
 
    border-bottom: 2px solid #888; 
 
} 
 
.departure-card .btn-explore { 
 
    border: 1px solid #000; 
 
    display: inline-block; 
 
    text-transform: uppercase; 
 
    color: #000; 
 
    border-radius: 0; 
 
    padding: 5px; 
 
}

<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-md-4 vessel-card"> 
 
     <a href="cienfuegos-from-havana.html" class="special-departure"> 
 
     <img src="http://placehold.it/350x150"> 
 
     </a> 
 
     <h3>Vessel: Panorama</h3> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999 
 
      <a href="#" class="btn btn-explore">Explore</p></a> 
 
     </div> 
 
     <div class="departure-card"> 
 
     <p>Havana to Cienfuegos starting at $5,999 
 
      <a href="cienfuegos-from-havana.html" class="btn btn-explore">Explore</p></a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>