Flexbox Justify Content Options

Feature thumb snip20170714 13

Below are the Flexbox Justify Content tools you can use to align content in a div:

 

space-between

The space-between option justifies the content from left to right and spreads the elements so they fit across the container element.

Annotation from @cleber: Definition: items are evenly distributed in the line; first item is on the start line, last item on the end line

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

 

Resulting output:

space-around

Space around is very similar to space-between, except that it also includes space on the outside of the first and last elements of the containing div.

Annotation from @cleber: Definition: items are evenly distributed in the line with equal space around them. Note that visually the spaces aren’t equal, since all the items have equal space on both sides. The first item will have one unit of space against the container edge, but two units of space between the next item because that next item has its own spacing that applies.

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

 

Resulting output:

center

For years CSS made it shockingly difficult to center certain elements on a page. Flexbox makes it easy with the center option.

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

 

Resulting output:

 

flex-end

With the flex-end option, you can easily move a containing div's content to the right hand side of the container.

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

 

Resulting output:

flex-start

The default behavior is for elements to be justified to the left of a flex based container, however there may be times, such as when you're working with a template or nested class, where you need to override inherited styles, and you can do it with the following code:

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

 

Resulting output:

Annotation from @cleber: Resource on Flexbox