Wie kann ich drei Spalten pro Zeile anzeigen?

Question

Ich habe versucht, drei Spalten pro Zeile anzuzeigen. Ist es möglich, flexbox zu verwenden?

Mein aktueller CSS ist so etwas wie dieses:

.mainDiv { 
    display: flex; 
    margin-left: 221px; 
    margin-top: 43px; 
} 

Dieser Code setzt alle Inhalte in einer einzigen Zeile. Ich möchte eine Einschränkung hinzufügen, zeigt nur drei Datensätze pro Zeile.

Answer 1

Dies kann sein, was Sie suchen:

http://jsfiddle.net/L4L67/

body>div { 
 
    background: #aaa; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
body>div>div { 
 
    flex-grow: 1; 
 
    width: 33%; 
 
    height: 100px; 
 
} 
 

 
body>div>div:nth-child(even) { 
 
    background: #23a; 
 
} 
 

 
body>div>div:nth-child(odd) { 
 
    background: #49b; 
 
}

<div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Answer 2

Eine Lösung gefunden: Durch Hinzufügen der Eigenschaft flex-flow: row wrap; wird das Problem behoben.

.mainDiv { 
    display: flex; 
    margin-left: 221px; 
    margin-top: 43px; 
    width:100px; 
    flex-flow: row wrap; 
}