Как сделать что то подобно не существующему свойству float:top?

Question

[patriot02]

Нужно сделать чтобы элементы заполнялись так только с помощью css:
1 4 7
2 5 8
3 6 9
или
1 4 7
2 5
3 6
Гуглил, те которые варианты описаны не подходят.
если использовать flex-direction: column; то будет
1
2
3
4
и просто выход за границу блока

Answer 1

[Дмитрий]

flexbox в помощь

frontender.info/a-guide-to-flexbox

блин, ну читайте внимательнее:

<div class="fbox">
	<div class="dboxitem">1</div>
	<div class="dboxitem">2</div>
	<div class="dboxitem">3</div>
	<div class="dboxitem">4</div>
	<div class="dboxitem">5</div>
	<div class="dboxitem">6</div>
	<div class="dboxitem">7</div>
	<div class="dboxitem">8</div>
	<div class="dboxitem">9</div>
</div>

.fbox {

	height: 100px;
	width: 500px;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	.dboxitem {
		margin: auto; 
		flex: 1;
	}
}

Comments

[patriot02]

если использовать flex-direction: column; то будет
1
2
3
4
и просто выход за границу блока

[patriot02]

flex-wrap: wrap; гениально спасибо. Смотрю в книгу вижу фигу(

Answer 2

[Vlad Tytcky]

flex