Есть ли способ сделать это с помощью flexbox?

Question

Мои основные <div> имеют фиксированную высоту, но когда я пытаюсь использовать на нем box-orient: horizontal, они остаются все выше первого <div>, даже с переполнением.

Я застрял. Это то, что мне нужно:

и этот код:

<style> 
.box { 
    outline: 1px solid red; 
    width: 1000px; 
    height: 450px; 
    overflow: hidden; 
    display: box; 
    box-pack: center; 
    box-align: center; 
    box-orient:vertical; 
} 

.boxitem { 
    width:150px; 
    height:200px; 
    background:#ccc; 
} 
</style> 

<div class="box"> 
    <div id="box1" class="boxitem">flexbox item 1</div> 
    <div id="box2" class="boxitem">flexbox item 2</div> 
    <div id="box3" class="boxitem">flexbox item 3</div> 
</div> 

Answer 1

Вы используете свойство от 2009 спецификации, которая постепенно сокращаются в пользу этого проекта: http://www.w3.org/TR/2012/CR-css3-flexbox-20120918/. Вы действительно нуждаетесь в box-orient: vertical из спецификации 2009 года, но это все равно вам не поможет, поскольку, насколько я могу судить, никто не реализовал box-lines: multiple, чтобы включить упаковку. Вам нужна возможность обертывания, если вы хотите использовать только один элемент гибкого контейнера.

Итак, приведенный ниже код будет охватывать все ваши базы для браузеров, которые полностью поддерживают спецификацию Flexbox: Opera, Chrome, IE10.

http://jsfiddle.net/FwfDV/

.box { 
    outline: 1px solid red; 
    width: 1000px; 
    height: 450px; 
    display: -webkit-flexbox; 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    -webkit-flex-flow: column wrap; 
    -ms-flex-flow: column wrap; 
    flex-flow: column wrap; 
    -webkit-flex-pack: justify; /* optional */ 
    -ms-flex-pack: justify; /* optional */ 
    -webkit-justify-content: space-between; /* optional */ 
    justify-content: space-between; /* optional */ 
} 
@supports (display: flex) and (flex-wrap: wrap) { 
    .box { 
    display: flex; 
    } 
} 

.boxitem { 
    width: 150px; 
    height: 200px; 
    background: #ccc; 
} 

<div class="box"> 
    <div id="box1" class="boxitem">flexbox item 1</div> 
    <div id="box2" class="boxitem">flexbox item 2</div> 
    <div id="box3" class="boxitem">flexbox item 3</div> 
    <div id="box4" class="boxitem">flexbox item 4</div> 
    <div id="box5" class="boxitem">flexbox item 5</div> 
    <div id="box6" class="boxitem">flexbox item 6</div> 
</div> 

Однако, если ваш «boxitem» элементы являются регулярными/фиксированные размеры, как это, я рекомендую использовать CSS столбцы вместо этого, который имеет немного более широкую поддержку и может сделать почти ту же самую работу.