it-swarm.com.de

Arrangieren Sie 2 Elemente pro Reihe mit der Flexbox

Stellen Sie sich vor, ich habe folgendes Markup

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

und Stil

.item {
  width: 100%
}

und aus bestimmten Gründen kann ich die Breite des .item nicht ändern. Kann ich in jeder Zeile 2 Elemente anordnen, indem Sie den übergeordneten Container .container, mit der Flexbox oder auf andere Weise gestalten?

15
PranavPinarayi

sie können flex: 0 50% an untergeordnete divs vergeben, ohne die .item

.item {
  width: 100%
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 0 50%;
  /*demo*/
  border: red solid;
  box-sizing:border-box
}
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

34
dippas

Unter der Annahme, dass die width-Eigenschaft nicht geändert werden muss, kann ich mir einige mögliche Lösungen vorstellen, die erste ist fit-content, die erstaunlich schlechte Browserunterstützung bietet. Die zweite ist die Verwendung der Positionierung, die aufgrund ihrer heiklen Natur und der Wahrscheinlichkeit, bei verschiedenen Bildschirmgrößen zu versagen, eine ebenso schlechte Idee ist.

Nun sind die letzten beiden sehr ähnlich, einer besteht darin, zwei Container zu verwenden, ihnen display:inline; eine begrenzte Breite zu geben und sie mit Elementen zu füllen. Wenn Sie es nicht bemerkt haben, handelt es sich im Wesentlichen um eine 2 × 1-Tabelle.

Schließlich könnten Sie einen 2 × 1-Tisch erstellen, und obwohl dies wahrscheinlich die einfachste Lösung ist, ist es eine schlechte Idee, sich daran zu gewöhnen, Tabellen zu verwenden, um andere Elemente als Formulare und Tabellen zu positionieren. Es ist jedoch eine Option, die ich Ihnen zur Verfügung stellen werde.

Viel Glück!

0
Ben