How to Create LEFT-RIGHT Alignment of Containers with CSS Flex

css
Published on April 29, 2020

A two-column layout, where the first item is aligned to the left, and the second item is aligned to the extreme right, can be created easily using CSS flexbox.

The trick is to set justify-content: space-between for the main flex container, so that space remaining is set between the two flex items.

Example

Left
Container
Right
Container

HTML & CSS

<div id="parent">
	<div class="child">Left Container</div>
	<div class="child">Right Container</div>
</div>
#parent {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}
Related Tutorials
How to Align Column DIVs as Left-Center-Right with CSS Flex
Comments
Loading Comments