CSS: Flex

Using Flex is a really simple way to align elements inside a div.

Align Center

This will align the inner elements to be centered vertically and horizontally using justify-content: center;

.box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}

Align Left

This will align the inner elements to be centered vertically aligned left horizontally using justify-content: flex-start;

.box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}

Align Right

This will align the inner elements to be centered vertically aligned right horizontally using justify-content: flex-end;

.box {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
}