CSS Flexible Box

Responsive boxes

By adding flex-wrap: wrap;, boxes can flow onto multiple lines.

The flex-basis (e.g. 200px) can either grow (flex-grow) or shrink (flex-shrink).


.row {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}

.row div {
	flex: 1 1 200px;
}
		
1
2
3
4
5

Responsive boxes (wider)


.row.wider div {
	flex: 400px;
}
		
1
2
3
4
5

Responsive boxes (wrap-reverse)

The boxes can also be wrapped in reverse.


.row.reverse {
	flex-wrap: wrap-reverse;
}
		
1
2
3
4
5

Center


.center {
	height: 300px;
	justify-content: center; /* align to center of line */
	align-items: center; /* align to center of other axis */
}
		
middle/center