Flex-Eigenschaft verwechselt die Tastenhöhe?

Lesezeit: 4 Minuten

Benutzer-Avatar
vikrantnegi

Ich verwende Bootstrap und erstelle ein Layout mit Flex.

Aktuell nimmt der Button die Höhe des Containers an. Unter dem Text ist sehr viel Platz und ich möchte i entfernen, und wenn ich der Schaltfläche Polsterung hinzufüge, wird sie ungleichmäßig groß. Ich habe versucht, die Größe nach Zeilenhöhe anzupassen, aber ich versuche, die tatsächliche Lösung und den Grund dafür zu finden, warum ich dieses Problem habe.

Irgendwas, was ich hier mit Flex vermisse oder ist es etwas anderes? Jede Hilfe wird sehr geschätzt. Vielen Dank.

.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="https://stackoverflow.com/questions/35223471/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="https://stackoverflow.com/questions/35223471/cienfuegos-from-havana.html" class="btn btn-explore">Explore</a>
      </div>
    </div>
  </div>
</div>

Flexbox Artikel gleich machen height wie Sie hier sehen können Demo aber Sie können verwenden align-items um das zu ändern 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>

  • Gern geschehen. Nur um hinzuzufügen, Sie haben Standard margin an p Tag und Sie können auch andere verwenden align-items Optionen wie flex-start jsfiddle.net/6qym530t/2

    – Nenad Vracar

    5. Februar 2016 um 12:16 Uhr

  • Was macht Flex-Start?

    – vikrantnegi

    5. Februar 2016 um 12:23 Uhr

  • Es ist wie vertical-align: top für Flex-Artikel, aber der Unterschied ist, dass es tatsächlich funktioniert :)

    – Nenad Vracar

    5. Februar 2016 um 12:25 Uhr

  • Verwenden align-items: start vertikal oben auszurichten.

    – Friedrich

    16. September 2021 um 21:17 Uhr

Benutzer-Avatar
WasiF

Es gibt zwei mögliche Lösungen

1. d-flex mit align-items-* kann dir helfen.

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex justify-content-center align-items-center bg-info" style="height: 160px;">
  <button class="btn btn-success">align-items-* saved me :)</button>
</div>

2. Nein css erforderlich, wickeln Sie einfach die button mit span oder div

<link
href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" 
rel="stylesheet"/>

<div class="d-flex justify-content-around bg-info" style="height: 160px;">
  <span>
    <button class="btn btn-success">span or div saved me :)</button>
  </span>
 
  <button class="btn btn-danger">Aw, flex infected me ;(</button>
</div>

Dies ist eine einfachere Lösung. Diese Lösung richtet die Schaltfläche horizontal in der Mitte aus und verändert nicht die Höhe der Schaltfläche oder anderer untergeordneter Elemente.

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

Sie müssen die Schaltfläche in den Absatz einfügen. Ich habe auch eine enthalten padding zum Knopf von 5px so dass das Kästchen nicht so nah am Text steht, aber der Wert kann an Ihre Bedürfnisse angepasst oder ganz entfernt werden, wenn dies unerwünscht ist.

.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="https://stackoverflow.com/questions/35223471/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="https://stackoverflow.com/questions/35223471/cienfuegos-from-havana.html" class="btn btn-explore">Explore</p></a>
      </div>
    </div>
  </div>
</div>
1055160cookie-checkFlex-Eigenschaft verwechselt die Tastenhöhe?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy