flex mesy nieruchomości przycisk wysokość przycisku?

Question

Używam układu flex i po prostu kocham jak to działa, ale mam problem z właściwością layoutu.

Używam bootstrap i układam z flexem.

Obecnie przycisk przyjmuje wysokość pojemnika. Pod tekstem jest bardzo dużo miejsca i chcę go usunąć, a kiedy dodaję dopełnienie do przycisku, jego rozmiar staje się nierówny. Próbowałem dostosować rozmiar po linii, ale starałem się znaleźć rzeczywiste rozwiązanie i powód, dla którego mam ten problem.

Coś, czego tu brakuje z flexem czy jest to coś innego? Każda pomoc będzie bardzo ceniona. Dzięki.

.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

schematu flexbox uczynić przedmioty same height jak widać tutaj Demo, ale można użyć align-items to zmienić lub w przypadku 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>

Answer 2

Trzeba to przycisk w ust. Do przycisku 5px dodałem także przycisk padding, aby pudełko nie znajdowało się tak blisko tekstu, ale wartość można zmienić zgodnie z potrzebami użytkownika lub całkowicie usunąć, jeśli jest niepożądana.

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