Default behavior

No flexing here

Flex Container Properties

To turn on flex behavior for a container, you must set display: flex; on the container in CSS.

Default flexing (display: flex;)

There are four Flex Container properties we'll learning about in our class. These properties are: flex-direction, flex-wrap, justify-content, and align-items

These properties can only be used on elements that also have display: flex; set on them.

Flex Direction examples

This flex property specifies the main axis for the flexbox, and by extension, the cross axis as well.

For example, if you set flex-direction to be a row, then the main axis is horizontal, while the cross axis is vertical.

This is important to know, because some flex properties affect the main axis, while other affect cross axis.

flex-direction: row;

flex-direction: row-reverse;

flex-direction: column;

flex-direction: column-reverse;

Flex Wrap examples

This flex property tell flex whether or not to wrap along the main axis.

Note: if you want to wrap vertically (i.e. with a column specified as the main axis), you'll need to specify an explicit or max height.

flex-wrap: nowrap;

flex-wrap: wrap;

flex-wrap: wrap-reverse;

Flex Justify Content examples

This flex property specifies the alignment along the main axis.

justify-content: flex-start;

justify-content: flex-end;

justify-content: center;

justify-content: space-between;

justify-content: space-around;

justify-content: space-evenly;

Flex Align Items examples

This flex property specifies the alignment along the cross axis.