Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

html
css
lists
spacing
web development

How to Space Items using justify-content

Educative Answers Team

justify-content

justify-content aligns a list’s content salong the main axis of a flex container by distributing space between or around items.

It has six different values that change how the list is aligned:

  1. flex-start – this is the default value, it positions the items at the start of the container.
  2. flex-end – positions the items at the end of the container.
  3. center – places items in the center.
  4. space-around – places items with space distributed evenly around the start and end of the list.
  5. space-between – evenly distributes space items between the first item is set at the start of the container, and the last item is set at the end.
  6. space-evenly – spaces items such that they have equal amounts of space before and after them.

Usage

The following example demonstrates justify-content:

  • HTML
  • CSS

Here, justify-content has been used in the following order:

  1. flex-start
  2. flex-end
  3. center
  4. space-around
  5. space-between
  6. space-evenly

In order to use justify-content, all you need is the justify-content: desired value and display: flex properties. The rest are just for styling.

RELATED TAGS

html
css
lists
spacing
web development
Copyright ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring