Skip to main content
Practice

Creating Layouts with Flexbox

Flexbox arranges items within a container in one direction, either a row (horizontal) or a column (vertical).

Flexbox layouts are similar to a bookshelf with books lined up in a row.

Here, think of the bookshelf as the Flex Container and the books inside as 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>

Flexbox Alignment and Spacing​

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

The main axis and cross axis depend on the flex-direction property.

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

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


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


justify-content​

Determines how to align items along the main axis within the flex container.

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

Possible values:​

  • flex-start: Align items to the start of the main axis. If horizontal, items are aligned to the left; if vertical, items are aligned to the top.

  • flex-end: Align items to the end of the main axis. If horizontal, items are aligned to the right; if vertical, items are aligned to the bottom.

  • center: Center items along the main axis. If horizontal, items are centered horizontally; if vertical, items are centered vertically.

  • space-between: Distribute items evenly with space between them. There is no space at the start and end points.

  • space-around: Distribute items with equal space around them. There's half the space between items at the start and end points.

  • space-evenly: Distribute items with equal space between them and at the start and end points.


align-items​

Determines how to align items along the cross axis within the flex container.

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

Possible values:​

  • flex-start: Align items to the start of the cross axis. If the main axis is horizontal, items are aligned to the top; if it is vertical, items are aligned to the left.

  • flex-end: Align items to the end of the cross axis. If the main axis is horizontal, items are aligned to the bottom; if it is vertical, items are aligned to the right.

  • center: Center items along the cross axis. If the main axis is horizontal, items are centered vertically; if it is vertical, items are centered horizontally.

  • stretch: Stretch items to fill the container along the cross axis, taking up the entire height or width.

  • baseline: Align items along their baselines within the container. A baseline typically refers to the bottom of text.


Follow the highlighted parts of the code for a guided implementation.

Want to learn more?

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