CSS flex, wie ein Element in der ersten Zeile und zwei in der nächsten Zeile angezeigt werden

76

Dies ist eine ziemlich einfache Frage, denke ich, aber ich kann nicht 3 Elemente im Flex-Container in 2 Zeilen anzeigen lassen, eines in der ersten Zeile und das andere 2 in der zweiten Zeile. Dies ist das CSS für den Flex-Container. Es zeigt natürlich die 3 Elemente in einer einzigen Zeile an :)

div.intro_container {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

Wenn eingestellt flex-wrapist wrap, werden die 3 Elemente in einer Spalte angezeigt. Ich dachte, die Wrap-Einstellung wäre erforderlich, um Containerelemente in mehreren Zeilen anzuzeigen. Ich habe dieses CSS für das erste Containerelement ausprobiert und beabsichtigt, dass es die gesamte erste Zeile einnimmt, aber es hat nicht funktioniert

div.intro_item_1 {
  flex-grow: 3;
}

Ich habe die Anweisungen in "CSS-Tricks" befolgt , bin mir aber nicht sicher, welche Befehlskombination ich verwenden soll. Jede Hilfe wäre sehr willkommen, da mich das verwirrt.

css flexbox RoyS
quelle
1
Haben Sie versucht, nur dem ersten Artikel einen min-widthvon zu geben 100%?
Mudlabs

Antworten:

127

Sie können so etwas tun:

.flex {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.flex>div {
  flex: 1 0 50%;
}

.flex>div:first-child {
  flex: 0 1 100%;
}
<div class="flex">
  <div>Hi</div>
  <div>Hello</div>
  <div>Hello 2</div>
</div>
Erweitern Sie das Snippet

Hier ist eine Demo: http://jsfiddle.net/73574emn/1/

Dieses Modell basiert auf dem Zeilenumbruch, nachdem eine "Zeile" voll ist. Da wir die ersten Elemente flex-basisauf 100% setzen, wird die erste Zeile vollständig ausgefüllt. Besondere Aufmerksamkeit auf dieflex-wrap: wrap;

Nico O.
quelle
Die Anzeige befindet sich unverändert in 3 Zeilen. Die 2 Elemente in der zweiten Zeile belegen separate Zeilen, sodass insgesamt 3 Zeilen erstellt werden. Die 3 Elemente enthalten ungefähr 6 Textzeilen auf der Seite.
RoyS
Ich kann dir nicht so folgen. Bitte machen Sie eine jsFiddle-Demo.
Nico O
OK, ich habe ungefähr 50 Zeichen zu jedem der Divs in Ihrer Geige hinzugefügt, und dies hat die 3 Divs in eine Spaltenformation gebracht. Das Problem scheint die Textmenge in den Containerelementen zu sein
RoyS
Aha. Überprüfen Sie diese neue Version: jsfiddle.net/73574emn/1 Ich habe die Basisgröße jedes Flex-Elements auf 50% festgelegt (mit Ausnahme der ersten).
Nico O
Übrigens habe ich zur Kontrolle die Box-Sizing-Regel auskommentiert. Es machte keinen Unterschied. Gibt es also einen guten Grund, es aufzunehmen?
RoyS
8

Die Antwort von Nico O ist richtig. In Internet Explorer 10 bis 11 und Firefox wird jedoch nicht das gewünschte Ergebnis erzielt.

Für IE fand ich das ändern

.flex > div
{
   flex: 1 0 50%;
}

zu

.flex > div
{
   flex: 1 0 45%;
}

scheint den Trick zu tun. Fragen Sie mich nicht warum, ich bin nicht weiter darauf eingegangen, aber es könnte etwas damit zu tun haben, wie der IE die Border-Box rendert oder so.

Im Fall von Firefox habe ich es durch Hinzufügen gelöst

display: inline-block;

zu den Gegenständen.

Peter Waegemans
quelle