Flex Layout 2

Flexbox arranges items within a container in one direction, either as a row (horizontally) or a column (vertically).

The Flexbox layout is similar to a bookshelf where multiple books are arranged in a line.

Think of the bookshelf as the Flex Container and the books inside as the Flex Items.

Copy
<div class="flex-container">
  <div class="flex-item">Book 1</div>
  <div class="flex-item">Book 2</div>
  <div class="flex-item">Book 3</div>
</div>

In Flexbox, justify-content aligns items along the main axis, and align-items aligns items along the cross axis.

The main axis and cross axis are determined by the flex-direction property.

• Main axis: If flex-direction is row, the main axis is horizontal. If flex-direction is column, the main axis is vertical.

• Cross axis: If flex-direction is row, the cross axis is vertical. If flex-direction is column, the cross axis is horizontal.

The gap property controls the spacing between flex items within a flex container.

Determines how the items inside a flex container are aligned along the main axis.

If the main axis is horizontal (flex-direction: row), the items align horizontally. If the main axis is vertical (flex-direction: column), the items align vertically.

Possible values

• flex-start: Aligns the items at the beginning of the container. If the main axis is horizontal, items align to the left. If vertical, items align to the top.

• flex-end: Aligns the items at the end of the container. If the main axis is horizontal, items align to the right. If vertical, items align to the bottom.

• center: Aligns items in the center of the container. Horizontally if the main axis is horizontal, vertically if the main axis is vertical.

• space-between: Distributes items so that there is equal space between them. There is no space before the first item or after the last item.

• space-around: Distributes items so that there is equal space around them, with half-sized spaces at the ends.

• space-evenly: Distributes items so that there is equal space between and around each item.

Determines how the items inside a flex container are aligned along the cross axis.

If the cross axis is vertical (flex-direction: row), the items align vertically. If the cross axis is horizontal (flex-direction: column), the items align horizontally.

Possible values

• flex-start: Aligns the items at the start of the cross axis. If the cross axis is vertical, items align to the top. If horizontal, items align to the left.

• flex-end: Aligns the items at the end of the cross axis. If the cross axis is vertical, items align to the bottom. If horizontal, items align to the right.

• center: Aligns items in the center of the cross axis. Vertically if the cross axis is vertical, horizontally if the cross axis is horizontal.

• stretch: Stretches items to fill the container along the cross axis.

• baseline: Aligns flex items along their baselines. The baseline is typically the line upon which most letters sit, often referred to as the bottom of the text.