फ्लेक्स प्रॉपर्टी मैस बटन बटन ऊंचाई?

Question

मैं एक फ्लेक्स लेआउट का उपयोग कर रहा हूं और मैं बस प्यार करता हूं कि यह कैसे काम करता है लेकिन मुझे लेआउट संपत्ति में कठिनाई हो रही है।

मैं बूटस्ट्रैप का उपयोग कर रहा हूं और फ्लेक्स के साथ लेआउट बना रहा हूं।

वर्तमान में बटन कंटेनर की ऊंचाई ले रहा है। पाठ के नीचे एक बहुत सी जगह है और मैं इसे हटाना चाहता हूं और जब मैं बटन में पैडिंग जोड़ता हूं तो यह आकार में असमान हो जाता है। मैंने लाइन ऊंचाई से आकार को समायोजित करने की कोशिश की लेकिन मैं वास्तविक समाधान और कारण ढूंढने की कोशिश कर रहा हूं कि मुझे यह समस्या क्यों है।

कुछ भी जो मैं यहां फ्लेक्स के साथ लापता हूं या यह कुछ और है? किसी भी मदद की अत्यधिक सराहना की जाएगी। धन्यवाद।

.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 ही height आइटम बनाने के रूप में आप यहाँ देख सकते हैं Demo, लेकिन आप align-items का उपयोग करने वाले को बदलने के लिए कर सकते हैं या अपने मामले में 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

आप पैराग्राफ में बटन शामिल करने के लिए की जरूरत है। मैंने को 5px के बटन में भी शामिल किया है ताकि बॉक्स टेक्स्ट के नजदीक न हो, लेकिन मूल्य आपकी आवश्यकताओं के अनुरूप बदल दिया जा सकता है, या अवांछित होने पर पूरी तरह हटा दिया जा सकता है।

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