COURSE SYLLABUS

1. Introduction to CSS

Introduction to CSS How CSS Works CSS vs HTML Adding CSS

2. CSS Basics

CSS Basics CSS Syntax Inline CSS Internal CSS External CSS CSS Comments

3. CSS Selectors

CSS Selectors Element Selector Class Selector ID Selector Attribute Selector Descendant Selector Child Selector Pseudo-Class Selector Pseudo-Element Selector

4. Colors & Backgrounds

Colors & Backgrounds Color Values Background Color Background Image Background Repeat Background Attachment Multiple Backgrounds

5. Text & Fonts

Text & Fonts Text Color Text Alignment Text Decoration Text Transformation Text Spacing Text Shadow Font Family Font Size Font Style Font Weight Web Fonts

6. CSS Box Model

CSS Box Model Width & Height Padding Margin Border Border Radius Box Sizing Box Shadow Overflow

7. Flexbox

Flexbox Flex Container Flex Direction Flex Wrap Justify Content Align Items Align Content Gap Flex Items Order Flex Grow Flex Shrink Flex Basis

8. CSS Grid

CSS Grid Grid Container Grid Rows & Columns Grid Template Columns Grid Template Rows Grid Gap Grid Column Grid Row Grid Area Grid Alignment Responsive Grid

9. Responsive Design

Responsive Design Responsive Web Design Viewport Media Queries Breakpoints Mobile First Responsive Images Responsive Typography

10. Advanced CSS

Advanced CSS CSS Pseudo-Classes CSS Pseudo-Elements CSS Transforms CSS Transitions CSS Animations CSS Variables CSS Functions CSS Specificity CSS Best Practices

CSS Justify Content

The CSS justify-content property controls how Flex Items are positioned along the main axis of a Flex Container.

When the Flex Direction is row, the main axis is horizontal. Therefore, justify-content controls the horizontal distribution of the Flex Items.

When the Flex Direction is column, the main axis becomes vertical, so justify-content controls the vertical distribution.

Syntax

.container {
    display: flex;
    justify-content: value;
}

Understanding the Main Axis

The main axis is the primary direction in which Flex Items are arranged.

With flex-direction: row;, the main axis runs horizontally.

With flex-direction: column;, the main axis runs vertically.

Justify Content Diagram

Item 1

Item 2

Item 3

justify-content controls the distribution of items along the main axis.

Values of justify-content

Value	Purpose
flex-start	Places items at the beginning of the main axis.
flex-end	Places items at the end of the main axis.
center	Places items in the center of the main axis.
space-between	Places equal space between items.
space-around	Places space around each item.
space-evenly	Creates equal space between items and the container edges.

1. justify-content: flex-start

flex-start places the Flex Items at the beginning of the main axis.

.container {
    display: flex;
    justify-content: flex-start;
}

Output

HTML

CSS

JavaScript

2. justify-content: flex-end

flex-end places the Flex Items at the end of the main axis.

.container {
    display: flex;
    justify-content: flex-end;
}

Output

HTML

CSS

JavaScript

3. justify-content: center

center places the Flex Items in the center of the main axis.

.container {
    display: flex;
    justify-content: center;
}

Output

HTML

CSS

JavaScript

4. justify-content: space-between

space-between places the first item at the beginning and the last item at the end. The remaining space is distributed between the items.

.container {
    display: flex;
    justify-content: space-between;
}

Output

HTML

CSS

JavaScript

5. justify-content: space-around

space-around gives each Flex Item space around it.

.container {
    display: flex;
    justify-content: space-around;
}

Output

HTML

CSS

JavaScript

6. justify-content: space-evenly

space-evenly distributes equal space between the Flex Items and the edges of the container.

.container {
    display: flex;
    justify-content: space-evenly;
}

Output

HTML

CSS

JavaScript

Comparing justify-content Values

flex-start

Items are grouped at the beginning of the main axis.

flex-end

Items are grouped at the end of the main axis.

center

Items are grouped in the center of the main axis.

space-between

Equal space is placed between the items.

space-around

Space is distributed around each item.

space-evenly

Equal spacing is maintained between items and container edges.

Example 🌍🤓

A website navigation bar can use justify-content to control the position of navigation items.

.navbar {
    display: flex;
    justify-content: space-between;
}

With space-between, one group can stay at the beginning while another group can stay at the opposite end of the container.

This is commonly useful for layouts containing a logo on one side and navigation or action items on the other side.

Important: justify-content works along the main axis. Therefore, always check the value of flex-direction before deciding whether the alignment will be horizontal or vertical.

Summary

The justify-content property controls the distribution of Flex Items along the main axis. Common values include flex-start, flex-end, center, space-between, space-around, and space-evenly. Its behavior depends on the direction of the Flex Container.

← Previous: Flex Wrap

Next: Align Items →