Równomiernie rozmieszczać elementy w kolumnach

Question

Mam pojedynczy element o nazwie .wrap, w którym są umieszczane elementy. Nieznana liczba pozycji (.thing) powinna być ułożona w czterech kolumnach (jedna nad drugą).

<div class="wrap"> 
    <div class="thing"> thing1 </div> 
    <div class="thing"> thing2 </div> 
    ... 
</div> 

Kolumny muszą być równomiernie rozmieszczone, aby żadna kolumna nie była pusta. To byłoby bardzo łatwe przy użyciu:

.wrap { 
    column-count: 4; 
    column-fill: balance; 
} 

Jednak column-fill działa tylko w Firefox, wierzę.

Czy istnieje inna metoda CSS do osiągnięcia tego układu we wszystkich najnowszych wersjach przeglądarek? W szczególności, czy Flexbox mógłby w tym pomóc?

Należy pamiętać, że nie mogę dodać dodatkowych elementów div, aby działały jako kolumny i nie chcę rozwiązania JS.

Oto skrzypce który ma odpowiedni układ z wyjątkiem równomiernego rozkładu → http://jsfiddle.net/bpdtkmmt/

Answer 1

Tak, można użyć schematu flexbox tu i powinien otrzymać pracę w przeważającej części. Jest to trochę hacky i porzuciłeś używanie reguł kolumn CSS. Występuje nieco mniejsza zmienność, więc jeśli dodasz kolejne wiersze/kolumny, będziesz musiał zmienić wartości. Aby zachować liczbę kolumn w rzędzie, musisz ustawić stałą lub procentową wysokość dla opakowania. Następnie ustaw kontener opakowania jako elastyczny pojemnik z regułą display: flex i ustal wiele kolumn przy użyciu albo flex-direction: column i flex-wrap: wrap lub stenogramu flex-flow: column wrap.

Aby upewnić się, że każda kolumna zawiera x liczbę elementów, musisz użyć reguły flex-basis i ustawić procentową wartość kolumny, którą chcesz wypełnić. Tak więc kolumna z 3 elementami będzie miała flex-basis: 33.33%. Wskazałeś, że chcesz mieć kilka rzędów po 3 przedmioty, a następnie kilka rzędów po 2 elementy, więc musisz użyć selektora nth-child lub nth-of-type, aby ustanowić nową podstawę elastyczną 50% zaczynającą się od 10 elementu. Oczywiście musisz ustalić procentową szerokość, o jaką element strony ma zostać umieszczony na stronie (4 wiersze = 25%). Aby upewnić się, że wszystkie elementy są równie wielkości, trzeba użyć

Jednak centrowanie tekstu w schematu flexbox pozostaje problemem i trzeba będzie ustalić rzeczy jak Flex pojemników poprzez ustawienie display do flex lub inline-flex z flex-direction z column, wraz z text-align i justify-content właściwościami ustawionymi na center.

justify-content: center; 
flex-direction: column; 
text-align: center 

http://jsfiddle.net/hxcnoxx9/10/

Ten CSS powinno rozwiązać swoje problemy.

.wrap { 
    height: 180px; 
    background: linear-gradient(to right, tomato 0%, tomato 25%, slategrey 25%, slategrey 50%, tomato 50%, tomato 75%, slategrey 75%); 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap; 
} 

.thing { 
    background: rgba(255, 255, 255, .2); 
    color: #fff; 
    width: 25%; 
    flex-basis: 33.33%; 
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); 
    display: inline-flex; 
    justify-content: center; 
    flex-direction: column; 
    text-align: center; 
} 

.thing:nth-child(1n+10) { 
    flex-basis: 50%; 
}