How to use CSS flexbox

If you’re a web developer, you’re probably familiar with the challenges of designing web layouts that work well across different screen sizes and devices. CSS Flexbox is a powerful tool that can make this process much easier by allowing you to create flexible and responsive layouts easily. In this article, we’ll explore CSS Flexbox, how it works, and how you can create stunning layouts for your web projects.

Follow up: How to Learn CSS Advanced Techniques

What is CSS Flexbox?

CSS Flexbox, short for “Flexible Box Layout”, is a CSS module that provides a flexible way to layout and align items in a container. With Flexbox, you can easily create complex layouts that adapt to different screen sizes and devices without the need for complicated CSS rules or JavaScript.

The Flexbox layout is based on a set of flex containers and flex items. A flex container is an element that contains one or more flex items, and it can be defined using the CSS display property with the value flex or inline-flex. Flex items are the child elements of a flex container and can be positioned, sized, and aligned within the container using Flexbox properties.

How Does CSS Flexbox Work?

CSS Flexbox uses a set of properties that define the layout and alignment of flex items within a flex container. The most important Flexbox properties are:

display: Defines the element as a flex container and specifies the layout direction (row or column).
flex-direction: Defines the main axis of the flex container (horizontal or vertical).
justify-content: Defines how flex items are distributed along the main axis of the flex container.
align-items: Defines how flex items are aligned along the cross axis of the flex container.
flex-wrap: Defines whether flex items should wrap to multiple lines or not.
flex-basis: Defines the default size of a flex item before any remaining space is distributed.
flex-grow: Defines how much a flex item should grow to fill the remaining space.
flex-shrink: Defines how much a flex item should shrink when there is not enough space.
order: Defines the order of a flex item within the flex container.

By using these properties in combination, you can create a wide variety of layouts and alignments for your web projects.

Now that we’ve covered the basics of CSS Flexbox, let’s dive into how you can use it to create flexible and responsive layouts for your web projects.

Step 1: Define a Flex Container

To use CSS Flexbox, you first need to define a flex container. This can be done by setting the display property of an element to flex or inline-flex. For example, to create a horizontal flex container, you can use the following CSS:

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

Step 2: Add Flex Items

Once you’ve defined a flex container, you can add flex items to it. These can be any HTML elements that you want to position and align within the container. To add a flex item, simply wrap it in a container element with the display property set to flex. For example, to create two flex items within a horizontal flex container, you can use the following HTML:

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

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

.item {
  /* Add styles for flex items here */
}

Step 3: Position and Align

Once you’ve added flex items to your flex container, you can use Flexbox properties to position and align them as needed. Let’s explore some of the most commonly used properties:

Justify Content

The justify-content property is used to distribute flex items along the main axis of the flex container. The available values are:

flex-start: Items are aligned to the start of the container.
flex-end: Items are aligned to the end of the container.
center: Items are centered within the container.
space-between: Items are evenly distributed in the container, with equal space between them.
space-around: Items are evenly distributed in the container, with equal space around them.

For example, to center two flex items within a horizontal flex container, you can use the following CSS:

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

Align Items

The align-items property is used to align flex items along the cross axis of the flex container. The available values are:

flex-start: Items are aligned to the start of the container.
flex-end: Items are aligned to the end of the container.
center: Items are centered within the container.
baseline: Items are aligned based on their text baseline.
stretch: Items are stretched to fill the container.

For example, to align two flex items to the top of a vertical flex container, you can use the following CSS:

.container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

Flex Basis

The flex-basis property is used to define the default size of a flex item before any remaining space is distributed. The default value is auto, which means that the size of the flex item is determined by its content. You can use any valid CSS size value for this property, such as px, %, em, etc.

For example, to set the default width of a flex item to 200 pixels, you can use the following CSS:

.item {
  flex-basis: 200px;
}

Flex Grow

The flex-grow property is used to define how much a flex item should grow to fill the remaining space. The default value is 0, which means that the flex item will not grow. You can use any valid number value for this property, which represents the growth factor of the flex item relative to the other flex items in the container.

For example, to make a flex item grow twice as much as the other flex items in the container, you can use the following CSS:

.item {
  flex-grow: 2;
}

Flex Shrink

The flex-shrink property is used to define how much a flex item should shrink when there is not enough space. The default value is 1, which means that the flex item will shrink proportionally with the other flex items in the container. You can use any valid number value for this property, which represents the shrink factor of the flex item relative to the other flex items in the container.

For example, to prevent a flex item from shrinking, you can use the following CSS:

.item {
  flex-shrink: 0;
}

Step 4: Responsive Flexbox Layouts

One of the biggest benefits of CSS Flexbox is that it allows you to create responsive layouts that adapt to different screen sizes and devices. You can achieve this by using media queries to adjust the Flexbox properties based on the screen size.

For example, to change the direction of a flex container to column on smaller screens, you can use the following CSS:

@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

This will change the layout of the flex container to a vertical column on screens with a maximum width of 768 pixels.

Step 5: Additional Flexbox Properties

In addition to the properties we’ve covered so far, there are many other Flexbox properties that you can use to create more complex layouts and alignments. Here are a few examples:

align-content: Defines how multiple lines of flex items are aligned within a flex container.
flex-flow: Combines the flex-direction and flex-wrap properties into a single shorthand property.
align-self: Overrides the align-items property for a single flex item.
gap: Defines the gap between flex items, similar to the margin property.

To learn more about these properties and how to use them, check out the Mozilla Developer Network’s Flexbox guide or the CSS Tricks guide to Flexbox.

Conclusion

CSS Flexbox is a powerful tool that can help you create flexible and responsive layouts for your web projects. By using the Flexbox properties we’ve covered in this article, you can easily position, size, and align elements within a container without the need for complicated CSS rules or JavaScript. Whether you’re building a simple one-page website or a complex web application, Flexbox can help you achieve the layout you want with ease.

Remember to experiment with different Flexbox properties and combinations to find the layout that works best for your project. And don’t forget to use media queries to create responsive layouts that adapt to different screen sizes and devices. With CSS Flexbox, the possibilities are endless!

📕 Related articles about CSS

Was this article helpful?

YesNo

How to use CSS flexbox

What is CSS Flexbox?

How Does CSS Flexbox Work?