Как использовать css3 flexbox для создания многоколоночного макета без расширения по вертикали?

Я играю с css3 flexbox в Chrome (не нужно беспокоиться о кросс-браузере для этого). Мне трудно убедить его в том, чтобы выложить мой контент так, как мне хотелось бы. Вот эскиз моей цели:

Здесь jsFiddle моей попытки: http://jsfiddle.net/Yht4V/2/ Кажется, что он отлично работает, за исключением того, что каждый .group будет расширять свою высоту, а не создавать несколько столбцы.

Я использую flexbox повсеместно здесь. body располагается вертикально, а div #content занимает оставшуюся высоту страницы. Каждый .group располагается горизонтально. Наконец, каждый .item располагается внутри .group по вертикали с упаковкой.

К сожалению, каждый .group заканчивается как один столбец, расширяя высоту #content, что вызывает вертикальную полосу прокрутки (нежелательную). Если я устанавливаю высоту каждого .group на фиксированный размер пикселя, элементы разбиваются на несколько столбцов, но это наносит ущерб текучести flexbox. Вот как это выглядит с фиксированными высотами: http://jsfiddle.net/Yht4V/3/

Итак, как я могу заставить div #content не расширяться вертикально, так как все управляется с помощью flexboxes без установки фиксированной высоты? Я ожидал, что flexbox вызовет больше столбцов вместо расширения высоты своего родителя и вызовет полосу прокрутки.

Ответ 1

Из того, что я видел в реализациях Chrome и Opera для Flexbox, для столбца flex-direction требуется ограничение высоты элемента, в противном случае он будет продолжать расширяться по вертикали. Это не должно быть фиксированным значением, это может быть процент.

Тем не менее, макет, который вы хотите для своих элементов .group, также может быть достигнут с помощью модуля CSS Columns. Поток элементов будет похож на поток ориентации столбца flexbox, но он будет создавать столбцы до тех пор, пока для них будет достаточно ширины, независимо от того, как долго находится документ.

http://jsfiddle.net/Yht4V/8/ (вам придется извинить отсутствие префиксов)

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex-grow: 1;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;
    flex: 1 1 auto;
}

#content > .group:first-child {
    columns: 10em;
    flex-grow: 2;    
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
    break-inside: avoid;
}

#content > .group .item:first-child {
    margin-top: 0;
}

Оставив это как кучу вложенных flexboxes, это было примерно так же близко, как я мог его получить:

http://jsfiddle.net/Yht4V/9/ (опять же, без префиксов)

html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-flow: column nowrap;
}

h1 {
    padding: 1em;
}

#content {
    padding: 10px;
    background-color: #eee;
    display: flex;
    flex: 1 1 auto;
    height: 100%;
    width: 100%;
}

#content > .group {
    margin: 10px;
    padding: 10px;
    border: 1px solid #cfcfcf;
    background-color: #ddd;

    display: flex;
    flex-flow: column wrap;
    flex: 1 1 30%;
    max-height: 100%;
}

#content > .group .item {
    margin: 10px;
    padding: 10px;
    background-color: #aaa;
}

Ответ 2

Замените в своем css следующее: : -webkit-flex; к следующему - : -webkit-box;

Это работало очень хорошо для меня: -)