i pasticci delle proprietà flessibili abbassano l'altezza del pulsante?

Question

Sto usando un layout flessibile e sto semplicemente amando come funziona, ma ho delle difficoltà nella proprietà del layout.

Sto utilizzando il bootstrap e sto creando un layout con flex.

Attualmente il pulsante sta prendendo l'altezza del contenitore. C'è un sacco di spazio sotto il testo e voglio rimuoverlo e quando aggiungo il padding al pulsante la sua dimensione diventa irregolare. Ho provato a regolare le dimensioni in base all'altezza della linea, ma ho cercato di trovare la soluzione reale e il motivo per cui ho riscontrato questo problema.

Qualcosa che mi manca qui con flex o è qualcos'altro? Qualsiasi aiuto sarà molto apprezzato. Grazie.

.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 rendono oggetti stessi height come potete vedere qui Demo, ma è possibile utilizzare align-items per cambiare la situazione o nel tuo caso 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

è necessario includere il pulsante nel paragrafo. Ho anche incluso uno nel pulsante di 5px in modo che la casella non sia così vicina al testo, ma il valore può essere modificato in base alle proprie esigenze o rimosso completamente se indesiderato.

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