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

css
Published on April 20, 2020

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

Left
Container
Center
Container
Right
Container

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.
Related Tutorials
How to Create LEFT-RIGHT Alignment of Containers with CSS Flex
How to Position Element to Bottom of Its Container with CSS Flex
Comments
Loading Comments