How to Align Column DIVs as Left-Center-Right with CSS Flex

One of the commonly used layout cases in HTML is a three-column layout where :

• first container is aligned to the left
• second container comes exactly in the center
• last container is aligned to the extreme right

Such a layout can created very easily with CSS flexbox.

Example

HTML & CSS

<div id="parent">
	<div class="child">Left Container</div>
	<div class="child">Center Container</div>
	<div class="child">Right Container</div>
</div>

/* parent container */
#parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

• justify-content property aligns the items inside the flex container.
• Setting justify-content: space-between aligns the items with space placed evenly between them.
• We can also use justify-content: space-around where items are aligned with space before, between and after each item.