377

Flexbox Justify-Content

The CSS3 justify-content property is used to define the alignment along the main axis. It is a sub-property of CSS3 Flexbox layout module.

It sets the Flexbox container’s item horizontally when the items don?t use all the available space on the main axis.

Its possible values are:

• flex-start:It is the default value. It sets the items at the beginning of the container
• flex-end:It sets the items at the end of the container.
• Center:It sets the items at the center of the container.
• space-between:It sets the items with space between the lines.
• space-around:It sets the items with space before, between, and after the lines.

Let’s take some example.

See this example:

---

Example1: (Use of Flex-end value)

Test it Now

---

Example2: (Use of Center value)

Test it Now

---

Exmple3: (Use of space-between value)

Test it Now

---

Example4: (Use of space-around value)

Test it Now