Skip to main content
Practice

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.

HTML
<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>

Aligning and spacing with flexbox​

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.


justify-content​

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.


align-items​

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.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.