Flexbox CSS Made Simple: A Beginner's Guide to Layouts with CSS

If you’re a beginner in web development, you’ve probably heard of Flexbox CSS. This powerful tool allows you to create complex layouts with ease, without having to resort to hacks or workarounds. In this guide, you’ll go through the basics of Flexbox CSS and see how to use it to create layouts for your web pages.

What is Flexbox CSS?

Flexbox CSS, or simply Flexbox, is a module of CSS that provides a more efficient way to layout, align, and distribute space among items in a container, even when their size is unknown or dynamic. It allows you to create responsive designs, which means your layouts will automatically adjust to different screen sizes, without the need for media queries. Flexbox provides a powerful alternative to older layout methods like float, inline-block, and table.

Basic Terminologies

Before we dive into using Flexbox, there are some basic terminologies we need to understand:

Flex Container

A flex container is an HTML element that contains one or more flex items.

Flex Items

Flex items are the HTML elements that are placed inside a flex container. They can be laid out horizontally or vertically.

Main Axis

The main axis is the axis along which the flex items are laid out. By default, the main axis is horizontal.

Cross Axis

The cross axis is perpendicular to the main axis. By default it is vertical.

Creating a Flex Container

To create a flex container, you need to add the display: flex property to the container element in your CSS. Here’s an example:

.container {
  display: flex;
}

This will create a horizontal flex container. You can also create a vertical flex container by adding the flex-direction: column property to the container element:

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

Adding Flex Items

To add flex items to your container, simply add HTML elements inside the container. Here’s an example:

<div class="container">
  <div class="item">Flex Item 1</div>
  <div class="item">Flex Item 2</div>
  <div class="item">Flex Item 3</div>
</div>

In the above example, we’ve added three HTML elements inside a container element. These are the flex items.

Controlling Flex Items

justify-content

The justify-content property controls the alignment of flex items along the main axis. It accepts several values, including flex-start, center, flex-end, space-between, and space-around.

.container {
  justify-content: center;
}

In the above example, all the flex items will be centered along the main axis(horizontally).

align-items

The align-items property controls the alignment of flex items along the cross axis. It accepts several values, including flex-start, center, flex-end, stretch, and baseline.

.container {
  align-items: center;
}

In the above example, all the flex items will be centered along the cross axis.

Flexbox provides several properties that allow you to control the positioning and sizing of your flex items. Here are some of the most commonly used properties:

flex-grow

The flex-grow property specifies how much the flex item should grow to fill available space in the container. It accepts a unitless value that represents a proportion of available space.

.item {
  flex-grow: 1;
}

In the above example, all the flex items will have the same proportion of available space.

flex-shrink

The flex-shrink property specifies how much the flex item should shrink when there isn’t enough space in the container. It accepts a unitless value that represents a proportion of available space.

.item {
  flex-shrink: 1;
}

In the above example, all the flex items will have the same proportion of available space when there isn’t enough space.

flex-basis

The flex-basis property specifies the initial size of the flex item before any available space is distributed. It can be set to a fixed value or a percentage.

.item {
  flex-basis: 50%;
}

In the above example,

all the flex items will have an initial size of 50% of the container width.

flex

The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis. It can be used to set all three properties at once.

.item {
  flex: 1 1 50%;
}

In the above example, all the flex items will have the same proportion of available space, the same proportion of space when there isn’t enough space, and an initial size of 50% of the container width.

align-content

The align-content property controls the alignment of flex lines along the cross axis when there is extra space in the container. It accepts several values, including flex-start, center, flex-end, space-between, and space-around.

.container {
  align-content: center;
}

In the above example, the flex lines will be centered along the cross axis.

Conclusion

That’s it for this beginner’s guide to Flexbox CSS! With the properties and concepts we’ve covered, you can create complex layouts with ease.

Happy coding!