What is Flexbox and what is it used for? A beginner's guide

Flexbox, or Flexible Box Layout, is a powerful tool in CSS that has revolutionized the way we design and align elements on the web. Introduced in CSS3, Flexbox allows for more flexible and complex user interface designs without the need for complicated floats or positioning. In this beginner's guide, we’ll explore what Flexbox is, how it works, and how you can use it to enhance your web projects.

What is Flexbox?

Flexbox is a CSS layout model that makes it easier to align and distribute space among items in a container, even when their sizes are unknown or dynamic. Unlike traditional layout models, Flexbox provides an axis-based system that simplifies the alignment and distribution of space among items.

How Does Flexbox Work?

Flexbox is based on two key concepts:

Flex Container: The parent element that contains the flexible items. It is defined using the display: flex or display: inline-flex property.
Flex Items: The child elements inside the flex container. These items can be manipulated and aligned using Flexbox properties.

Flex Container Properties

To make the most of Flexbox, it’s essential to understand the properties you can apply to the flex container.

display: flex

This property turns an element into a flex container, allowing its children to behave as flexible items. You can use display: flex for a block container or display: inline-flex for an inline container.

.container {
  display: flex;
}

flex-direction

Controls the direction in which the items are placed within the flex container. It can take the following values:

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.

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

justify-content

Aligns the flexible items along the main axis. The available values are:

flex-start: Aligns items at the start of the container.
center: Centers items.
flex-end: Aligns items at the end of the container.
space-between: Distributes items with the maximum space between them.
space-around: Distributes items with equal space around them.

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

align-items

Aligns the flexible items along the cross axis (perpendicular to the main axis). The available values are:

stretch (default): Stretches items to fill the container.
flex-start: Aligns items at the start of the container.
center: Centers items.
flex-end: Aligns items at the end of the container.
baseline: Aligns items along the container’s baseline.

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

flex-wrap

Controls whether items should wrap onto multiple lines when they don’t fit in a single line. The available values are:

nowrap (default): Items are kept on a single line.
wrap: Items wrap onto multiple lines.
wrap-reverse: Items wrap onto multiple lines in reverse order.

.container {
  display: flex;
  flex-wrap: wrap;
}

Flex Item Properties

Properties applied to flexible items allow for more detailed control over their size and alignment.

flex-grow

Defines the ability of an item to grow relative to the other flexible items. A value of 1 means the item can grow to occupy the available space.

.item {
  flex-grow: 1;
}

flex-shrink

Defines the ability of an item to shrink relative to the other flexible items. A value of 1 means the item can shrink if necessary.

.item {
  flex-shrink: 1;
}

flex-basis

Defines the initial size of a flexible item before flex-grow and flex-shrink properties are applied. It can be a value in pixels, percentages, etc.

.item {
  flex-basis: 200px;
}

align-self

Allows an individual item to align differently from the other items within the flex container. The values are the same as those for align-items.

.item {
  align-self: flex-end;
}

Practical Examples

Example 1: Navigation Bar Layout

.navbar {
  display: flex;
  justify-content: space-around;
  background-color: #333;
  padding: 10px;
}

.navbar a {
  color: #fff;
  text-decoration: none;
}

Example 2: Image Gallery Layout

<div class="gallery">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

.gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.gallery img {
  flex: 1 1 calc(33% - 10px);
  max-width: 100%;
  height: auto;
}

Conclusion

Flexbox is an essential tool for modern web design, allowing for more intuitive and flexible alignment and distribution of items. With the properties and concepts covered in this guide, you’re well-equipped to create adaptable and efficient web designs. Explore more about Flexbox and experiment with these properties to unlock its full potential in your projects.