Verschiebe die 2 Elemente pro Zeile mit flexbox

Vorstellen, ich habe folgende 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 aufgrund bestimmter Gründe, die ich nicht ändern kann die Breite des
.item
Kann ich gerne 2 Elemente in jeder Zeile von styling übergeordneten container .container mit flexbox oder andere Weise?

Sie können hinzufügen, eine andere Klasse und update css entsprechend? Vorausgesetzt .item ist weltweit im Einsatz, so dass Sie nicht ändern können den Stil der es
Ihre Anfrage ist nicht logisch...sind die .items soll 50% jetzt?
Nicht logisch, aber es ist möglich.

InformationsquelleAutor PranavPinarayi | 2017-07-11

0

Unter der Annahme, dass die width-Eigenschaft darf nicht geändert werden, kann ich mir ein paar mögliche Lösungen, wobei die erste fit-content hat erstaunlich schlechte browser-Unterstützung. Die zweite, ist die Positionierung verwenden, das ist eine ebenso schlechte Idee, durch seine übertriebene Art und die Wahrscheinlichkeit zu scheitern auf verschiedenen Bildschirm-Größen.

Nun die letzten zwei, sehr ähnlich sind, ist die Verwendung von zwei Behältern, geben Sie display:inline; geben Sie eine geringe Breite und füllen Sie diese mit Artikeln. Wenn Sie nicht bemerkt haben, dies ist im wesentlichen eine 2×1-Tabelle.

Schließlich könnte man ein 2×1-Tabelle, und während es ist wahrscheinlich die einfachste Lösung hier, es ist eine schlechte Idee zu bekommen in die Gewohnheit, mit Hilfe von Tabellen zu position andere Dinge als Formen und Tabellen. Es ist jedoch eine option, die ich Ihnen zur Verfügung stellen.

Glück!

InformationsquelleAutor Ben

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.