Constructing Layouts with Flexbox

The Flexbox layout is similar to a bookshelf with several books arranged in a row.

Here, consider the bookshelf as the Flex Container, and the books within the shelf as 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>

Flexbox aligns items inside a container along one direction, either Row (horizontal line) or Column (vertical line).

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

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

• Main Axis : If flex-direction is row, the main axis is horizontal; if column, it's vertical.

• Cross Axis : If flex-direction is row, the cross axis is vertical; if column, it's horizontal.

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

This property determines how items are aligned along the main axis inside the flex container.

When flex-direction is row, the main axis is horizontal; when column, it's vertical.

• flex-start : Aligns items at the start of the main axis. For horizontal, it's on the left; for vertical, it's at the top.

• flex-end : Aligns items at the end of the main axis. For horizontal, it's on the right; for vertical, it's at the bottom.

• center : Aligns items in the center of the main axis. For horizontal, it's centrally; for vertical, it's vertically centered.

• space-between : Distributes equal space between items. No space at the start or end.

• space-around : Distributes equal space around each item. Half the space on the start/end compared to space between items.

• space-evenly : Distributes equal space between items and at the start/end.

This property determines how items are aligned along the cross axis inside the flex container.

If flex-direction is row, the cross axis is vertical; if column, it's horizontal.

Values Assignable to align-items

• flex-start : Aligns items at the start of the cross axis. For horizontal main axis, it's on top; for vertical, it's on the left.

• flex-end : Aligns items at the end of the cross axis. For horizontal main axis, it's at the bottom; for vertical, it's on the right.

• center : Aligns items in the center of the cross axis. For horizontal main axis, it's vertically centered; for vertical, it's horizontally centered.

• stretch : Stretches items to occupy the container's entire height or width following the cross axis.

• baseline : Aligns flex items inside the container according to their baselines. The baseline typically refers to the bottom of the text in most cases.

Follow the emphasized parts of the code to input them correctly.