JavaScript Kit Try-It-Yourself Code Editor flex direction example

Enter Code:

<!doctype html>

<style>

Possible 'flex-direction' values:

'row': Flex items are positioned horizontally on the same line.
'row-reverse': Flex items are positioned horizontally on the same line, but with the order of the flex items reversed.
'column': Flex items are positioned vertically, stacked.
'column-reverse': Flex items are positioned vertically, stacked, but with the order of the flex items reversed.

div.flexcontainer{
	display: flex;
	justify-content: space-between; /* now controls vertical alignment with flex-direction:column */
	align-items: flex-start; /* now controls horizontal alignment with flex-direction:column */
	flex-direction: column; /* try changing this value */ 
	height: 200px;
	background: lightyellow;
}

div.flexitem{
	border: 3px solid darkred;
	background: #eee;
	padding: 10px;
	font: bold 1em Arial;
}

</style>

<body>

<div class="flexitem">Some links here. Some links here. Some links here. Some links here.</div>
	<div class="flexitem">Logo Here</div>
	<div class="flexitem">Search Box here. Search Box here. Search Box here.</div>

</div>

Output