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
Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)
How to Position Element to Bottom of Its Container with CSS Flex
Setting a Fixed Width for Items in CSS Flexbox
Comments
Loading Comments