CSS Flexbox Basics

CSS Flexbox is a layout model that provides an easier way to design complex and flexible layouts. It allows elements within a container to be arranged in rows or columns and provides control over their size, alignment, and distribution.

What is Flexbox?

Flexbox, short for Flexible Box Layout, is a one-dimensional layout method for arranging items in rows or columns. It enables you to align and distribute space among items in a container, even when their sizes are unknown or dynamic.

Setting Up a Flexbox Layout

To use Flexbox, first, define a container element as a flex container by applying the display: flex property to it. Items inside this container will become flex items.

/* Flex container setup */
.container {
  display: flex;
}

Once a container is set to display: flex, all direct children inside it become flex items that can be easily manipulated using various flexbox properties.

Flexbox Properties

Flexbox has several properties that control the layout of items inside the container. Here are the most commonly used properties:

1. justify-content

The justify-content property aligns flex items along the main axis (horizontal by default). It helps control the spacing between items.

.container {
  display: flex;
  justify-content: space-between;
}

The values for justify-content include:

• flex-start (default) - Aligns items at the start of the container.
• flex-end - Aligns items at the end of the container.
• center - Aligns items in the center of the container.
• space-between - Distributes items evenly with the first item at the start and the last item at the end.
• space-around - Distributes items with equal space around them.
• space-evenly - Distributes items with equal space between and around them.

2. align-items

The align-items property aligns flex items along the cross axis (vertical by default).

.container {
  display: flex;
  align-items: center;
}

The values for align-items include:

• stretch (default) - Stretches items to fill the container.
• flex-start - Aligns items at the start of the cross axis.
• flex-end - Aligns items at the end of the cross axis.
• center - Aligns items in the center of the cross axis.
• baseline - Aligns items to their baseline.

3. flex-direction

The flex-direction property defines the direction in which flex items are placed in the container. It controls the main axis.

.container {
  display: flex;
  flex-direction: column;
}

The values for flex-direction include:

• row (default) - Items are placed in a horizontal row.
• column - Items are placed in a vertical column.
• row-reverse - Items are placed in a horizontal row in reverse order.
• column-reverse - Items are placed in a vertical column in reverse order.

Example of Flexbox Layout

Here's a simple example of a flex container with three flex items:

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.item {
  width: 100px;
  height: 100px;
  background-color: #4CAF50;
}

The items will be evenly spaced and aligned in the center of the container.

Conclusion

CSS Flexbox is a powerful tool for creating responsive and flexible web layouts. By understanding and using the different properties, you can easily control the alignment and distribution of elements within a container, making it an essential tool for modern web design.