Justify-Content Property Explained with Code Examples Flexbox CSS Tutorial

Published: 28 May 2017
on channel: Java made Simple

5,015

CSS Flexbox Tutorial: Justify-Content Property with Code Examples - In this Flexbox tutorial, I discuss the justify-content property of the flex container. I show css code examples and display how the flex items are aligned within the flex container using justify-content.

Flexbox CSS code examples shown include:

Flex-direction set to row and justify-content set to flex-start.
Flex-direction set to row and justify-content set to flex-end.
Flex-direction set to row and justify-content set to center.
Flex-direction set to row and justify-content set to space-between.
Flex-direction set to row and justify-content set to space-around.
*Note: With flex-direction set to row, the main axis is horizontal, starting at the left (flex-start) and ending at the right (flex-end) of the flex container

Flex-direction set to column and justify-content set to flex-start.
Flex-direction set to column and justify-content set to flex-end.
Flex-direction set to column and justify-content set to center.
Flex-direction set to column and justify-content set to space-between.
Flex-direction set to column and justify-content set to space-around.
*Note: With flex-direction set to column, the main axis is vertical, starting at the top (flex-start) and ending at the bottom (flex-end) of the flex container

I wanted to show examples with both flex-direction set to row and flex-direction set to column because justify-content aligns flex items along the main axis. For flex-direction set to row, the main axis is horizontal. For flex-direction set to column, the main axis is vertical.

I did not include flex-direction set to row-reverse or column-reverse, but the flex items would align in the reverse with these options (for example, right instead of left for justify-content: flex-start on row-reverse).

Thank you for watching this Flexbox tutorial on the justify-content css property and flex item alignment. Please subscribe to Bootstrap CSS Girl.

On this page of the site you can watch the video online Justify-Content Property Explained with Code Examples Flexbox CSS Tutorial with a duration of hours minute second in good quality, which was uploaded by the user Java made Simple 28 May 2017, share the link with friends and acquaintances, this video has already been watched 5,015 times on youtube and it was liked by 63 viewers. Enjoy your viewing!

519