Design Template by Anonymous

Justify-Content & Align-Items

This page will go over vertical and horizonal positoning of child objects within a parent container using justify-content and align-items.

justify-content: single item

For object positioning within the flexbox container the justify-content: ; attribute is used. This attribute is responsible for the functions of float, with additonal features.

While this may look the same as `float: left;` the property `justify-content: left;` is actually used, achieving the same goal through the new more versitile flexbox element.

While this may look the same as `float: right;` the property `justify-content: right;` is actually used, achieving the same goal.

This example is from the introduction page but is repeated here for a more concise understanding of the versitility of `justify-content: center;`

justify-content: multiple items

In addition to the new center property for the justify-content attribute, there are other positioning attributes used when multiple objects are present within one container.

This attribute does not put any margin space, but will evenly space the objects within the container `justify-content: space-between;`

This attribute puts half sized spaces on the border objects and equal spaces between all other objects in the container `justify-content: space-around;`

This attribute creates equal amounts of space between the objects `justify-content: space-evenly;`

align-items

This property allows for objects to be adjusted to different positons on the cross axis

This attribute aligns the items in the row to the center of the parent object using `align-items: center;`

This attribute aligns the items to the bottom of the parent object using `align-items: end;`