# Flexbox Layout

The CSS Flexible Box Model, often referred to as Flexbox, is a way for a container to tells its children how best to fill the available space by altering width, height and order. Flexbox is a one-dimensional layout model, meaning it only handles distribution in one direction at a time, horizontal or vertical. This in contrast to the CSS Grid Layout which is a two dimensional model and able to control both the horizontal and the vertical at the same time.

# Flexible Box Container

When using Flexbox most of the settings are controlled by the parent element or the flexible box container. To create a flexible box container, apply the flex value to the display property of the desire parent element.

When display: flex is applied to a parent element, the child elements will no longer display as block elements, and the parent element will now be able to dictate how the children are distributed and aligned.

# Flex Direction

When working with Flexbox you must be aware two axes, a main axis and cross axis, and how Flexbox distributes and aligns items along this axes.

The flex-direction property is used to define which direction of the main axis. The flex-direction will take 4 valid values:

• row (default) or row-reverse: the main axis will run horizontally or the inline direction
• column or column-reverse: the main axis will run vertically or in block direction

# flex-direction: row

# flex-direction: row-reverse

# flex-direction: column

# flex-direction: column-reverse

# Flex Wrap

By default, children of a flex box container will remain on a single line.

The flex-wrap property is used to allow children to wrap.

# Justify Content

A flexbox container uses the justify-content property can set how the children are distributed in the available space across the main axis. The justify-content property will accept the following values:

• flex-start (default): Items are packed on the start of the main axis
• flex-end: Items are packed on the end of the main axis
• center: Item are centered along the main axis
• space-around: Items are evenly distributed in the line with equal space around them
• space-between: Items are evenly distributed in the line; first item is on the start line, last item on the end line
• space-evenly: Items are distributed so that the spacing between any two adjacent alignment subjects, before the first alignment subject, and after the last alignment subject is the same

# justify-content: flex-start

# justify-content: flex-end

# justify-content: center

# justify-content: space-around

# justify-content: space-between

# justify-content: space-evenly

# Align Items

The align-items property defines the default behavior for how children are laid along the cross axis. The align-items will accept the following properties:

• stretch (default): items are stretched to fill the container
• flex-start: items are placed at the beginning of the cross axis.
• flex-end: items are placed at the end of the cross axis
• center: items are placed at the center of the cross axis
• baseline: items are placed so their baselines align

# align-items: stretch

# align-items: flex-start

# align-items: flex-end

# align-items: center

# align-items: baseline

# Additional Resources

Below are additional resources for learning Flexbox Layout.

• A Complete Guide to Flexbox (CSS Tricks)
• Flexbox Froggy Game
• Flexbox Defence Game
• Basic Concepts of Flexbox (MDN)
• Flexbox Letters (CodePen)