JavaScript Kit Try-It-Yourself Code Editor flex align content example

Enter Code:

<!doctype html>

<style>

/*
Possible 'align-content' values:

'flex-start': Flex items are aligned at the start of the flex container. Default value.
'flex-end': Flex items are aligned at the end of the flex container.
'center: Flex' items are aligned at the center of the flex container, flushed. Any left over space is evenly distributed at the beginning and end of the flex container.
'space-between': Flex items are distributed evenly across the flex container. The first flex item is aligned at the beginning of the container, and the last item at the very end.
'space-around': Flex items are distributed evenly across the flex container, with the very first and very last flex item also carrying space (1/2 of that of the other flex items) at the beginning and very end of the flex container, respectively.
*/

div.flexcontainer{
	display: flex;
	width: 420px;
	height: 300px;
	flex-wrap: wrap;
	justify-content: space-around;
	align-content: space-around; /* Disbribute multi-lined flex items vertically and equally relative to flex container */
	/* align-items: center; */ /* Uncomment line to also center flex item #2 relative to flex items on the same line */
	background: black;
}

div.flexitem{
	background: #eee;
	padding: 10px;
	width: 100px;
	height: 50px;
	font: bold 2em Arial;
}

div.flexitem:nth-of-type(1){
	width: 300px;
	
}

div.flexitem:nth-of-type(2){
	height: 90px;
}

</style>

<body>

<p><code>align-content:space-around</code> is defined to add equal spacing between the flex items vertically relative to the flex container on the cross axis (ie: vertically). Notice how it doesn't affect alignment on a per line basis- that's why flex item #2 isn't centered relative to #3 and #4. To do this, we should use the property "<code>align-items</code>" and set it to "<code>center</code>" as well.

Output