2014-06-13 15 views
25

Próbowałem wyświetlić trzy kolumny w wierszu. Czy to możliwe przy użyciu Flexbox?Jak wyświetlić trzy kolumny w rzędzie?

Mój obecny CSS jest coś takiego:

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

Kod ten stawia całą treść w jednym rzędzie. Chcę dodać ograniczenie, aby wyświetlić tylko trzy rekordy w wierszu.

Odpowiedz

47

To może być to, czego szukasz:

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>

+5

Twoje oznaczenia są mylące. Działa to, ale biorąc pod uwagę, że Twój przykład jest łatwiejszy do zrozumienia/przeczytania. –

+0

Spowoduje to wyświetlenie jednej lub dwóch kolumn, gdy w boku znajduje się tylko jeden lub dwa "div", z powodu 'flex-grow'. – TheThirdMan

+0

Usuń "flex-grow", jeśli nie chcesz, aby elementy podrzędne wypełniały przestrzeń. – cptstarling

2

Znaleziono rozwiązanie: dodanie właściwości flex-flow: row wrap; rozwiąże problem.

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

To nie jest odpowiedź na to pytanie. –

+0

Jestem osobą, która zadała to pytanie i na nie odpowiedziała. I jest to odpowiedź na to pytanie. – maxspan

Powiązane problemy