CSS flex, wie man ein Element in der ersten Zeile und zwei in der nächsten Zeile anzeigt

Das ist eine ziemlich einfache Frage, ich denke, aber ich kann nicht 3 Elemente im Flex-Container in 2 Zeilen anzeigen, eins in die erste Reihe und die anderen 2 in der zweiten Reihe. Dies ist das CSS für den Flex-Container. Es zeigt die drei Elemente auf einer einzelnen Zeile, offensichtlich :)CSS flex, wie man ein Element in der ersten Zeile und zwei in der nächsten Zeile anzeigt

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

Wenn flex-wrap-wrap gesetzt ist, dann werden die drei Elemente werden in einer Spalte angezeigt. Ich dachte, dass die Umbrucheinstellung benötigt wurde, um Containerelemente in mehreren Zeilen anzuzeigen. Ich habe diese CSS versucht, für den ersten Behälter Artikel, in der Absicht zu haben, sie die ganze erste Reihe einnehmen, aber es hat nicht funktioniert

div.intro_item_1 { 
    flex-grow: 3; 
}

Ich habe the instructions in "CSS-Tricks" gefolgt, aber ich bin wirklich nicht sicher, welche Kombination von Befehlen zu verwenden. Jede Hilfe wäre sehr willkommen, da ich darüber verwirrt bin.

Quelle

2014-09-28 RoyS

Haben Sie versucht, dem ersten Element eine 'min-width' von' 100% 'zu geben? – Paralellos

Sie können 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%; 
}

Mit einer solchen HTML:

<div class="flex"> 
    <div>Hi</div> 
    <div>Hello</div> 
    <div>Hello 2</div> 
</div>

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

Dieses Modell auf der Linie-wrap verlässt sich nach eine "Reihe" ist voll. Da wir die flex-basis des ersten Elements auf 100% setzen, füllt es die erste Zeile vollständig aus. Besondere Aufmerksamkeit auf die flex-wrap: wrap;

Quelle

2014-09-28 15:44:22

Die Anzeige bleibt unverändert in drei Zeilen, die zwei Elemente, die in der zweiten Zeile stehen sollten, belegen separate Zeilen und ergeben insgesamt drei Zeilen. Die 3 Elemente enthalten etwa 6 Textzeilen auf der Seite. – RoyS

Ich kann dir nicht so folgen. Bitte machen Sie eine jsFiddle Demo. –

OK, was ich getan habe, war, etwa 50 Zeichen zu jedem der Divs in deiner Geige hinzuzufügen, und dies bringt die 3 Divs in eine Spaltenformation. Das Problem scheint die Menge an Text in den Container-Elementen zu sein – RoyS

Die Antwort von Nico O ist richtig. Dies führt jedoch nicht zum gewünschten Ergebnis bei Internet Explorer 10 bis 11 und Firefox.

Für IE, fand ich, dass

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

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

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

Im Fall von Firefox löste ich es von

display: inline-block;

auf die Elemente hinzufügen.

Quelle

2015-09-08 09:11:54

CSS flex, wie man ein Element in der ersten Zeile und zwei in der nächsten Zeile anzeigt

Antwort

Verwandte Themen