Wie kann man ein Kind in Flex dazu bringen, die volle Breite zu erreichen?

Lesezeit: 3 Minuten

Benutzer-Avatar
vikrantnegi

Ich habe angefangen, Flex zu verwenden, und ich liebe, wie es funktioniert.

Ich verwende Flex-Layout und möchte das btn-group Klasse drinnen dashboard-body um die volle Breite des Elternteils zu erreichen. Im Moment entspricht seine Breite der Breite beider Schaltflächen zusammen.

Was ich hier erreichen möchte, ist das Hinzufügen von Leerzeichen zwischen beiden Schaltflächen. Außerdem möchte ich keinen rechten oder linken Rand verwenden. Ich will das btn-group div, um die volle Breite seines Elternteils zu haben dashboard-body damit ich die Flex-Eigenschaft verwenden kann align-content: space-between genug Platz zwischen den beiden Knöpfen haben.

Gibt es einen besseren Weg als das Hinzufügen von Rändern/Auffüllungen um Schaltflächen herum, um dasselbe zu tun?

Vielen Dank.

Hier ist der Code:

.dashboard-body {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }
<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>

  • .btn-group { align-self:stretch; } jsfiddle.net/bLaoh9td

    – Pawel

    18. März 2016 um 9:19 Uhr

  • align-content: space-between funktioniert in dem Fall nicht. Irgendeine Lösung dafür.

    – vikrantnegi

    18. März 2016 um 9:26 Uhr

  • Sie müssen die machen .btn-group auch ein Flex-Container: jsfiddle.net/bLaoh9td/1 (Übrigens ist es justify-content).

    – Pawel

    18. März 2016 um 9:27 Uhr

  • @ vikrantnegi007 Ihr Beispiel funktioniert gut, wenn “Wide Item” sein muss Erste oder letzte (indem CSS ein wenig angepasst wird) Element der Flexbox. Es scheint jedoch nicht zu funktionieren, wenn ich möchte, dass das „mittlere“ Element die volle Breite der Flexbox einnimmt. Gibt es eine Möglichkeit, es zu beheben? Oder funktioniert Flexbox nur so?

    – Dimitri K

    21. Februar 2019 um 13:00 Uhr

  • @DimitryK Können Sie eine Jsfiddle für Ihren Fall erstellen? Ich kann dir helfen, indem ich mir den Code ansehe.

    – vikrantnegi

    22. Februar 2019 um 9:19 Uhr

Dies ist der richtige Weg, um das zu erreichen:

.dashboard-body{
  text-align:center;
  width: 300px;
  margin: 0 auto;
}
.btn-group{
  display:flex;
  flex-direction:row;
  justify-content: space-between;
}
.btn-group a{
  flex:0 0 auto;
}
<div class="dashboard-body">
  <p>You don't have any sales data.</p>
  <p>Please add a new book or upload CSVs.</p>

  <div class="btn-group">
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Add New Book">
    </a>
    <a href="#">
      <input class="add-new-book-btn" type="submit" value="Upload CSV">
    </a>
  </div>
</div>

  • Ich musste Breite 100 hinzufügen

    – bresleveloper

    5. März 2020 um 12:41 Uhr

Du kannst hinzufügen align-self:stretch auf der .btn-Gruppe.
Hier ist eine Demo: https://jsfiddle.net/f5noh2q7/1/

  • Vielen Dank, ich raufte mir die Haare! Dieser hat mit einer Reihe sofort das gemacht, was ich wollte.

    – OwlOCR

    26. März 2020 um 17:05 Uhr

  • Das war nützlich, um das Gegenteil zu tun 🙂 Ich muss die Kinder NICHT in voller Breite nehmen lassen, also stelle ich es ein start

    – MCH

    18. November 2020 um 5:00 Uhr

Fügen Sie einfach diese CSS-Regel hinzu:

flex: auto;

1216730cookie-checkWie kann man ein Kind in Flex dazu bringen, die volle Breite zu erreichen?

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

Privacy policy