CSS Flex: What Every Developer Should Know
Tags: javascript, webdev, css
Published: 2023-03-28 04:28:35

---
title: CSS Flex: What Every Developer Should Know
published: true
date: 2023-03-27 11:00:00 UTC
tags: javascript, webdev, css
canonical_url: https://www.syncfusion.com/blogs/post/css-flex-every-developer-should-know.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z8keo7vqjilc7ywnm1iq.png
---
The flexbox, also known as the flexible box layout module, helps you efficiently design and build responsive webpages without using many positioning and float properties. Even when the size of flex items is unknown, you can easily resize and reposition the flex container and its items one-dimensionally and lay out the items to best fit the space available in the container.

According to [caniuse.com](https://caniuse.com/flexbox "Caniuse"), all modern browsers support the CSS flexible box layout module.

![CSS flex compatibility with modern web browsers](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/CSS-flexible-box.png)

## Basics and Terminology

First, let’s familiarize ourselves with the key terms commonly used in flexbox:

- **Flex line:** Flex items are aligned along a flex line inside the flex container. By default, in a flex container, there’s only one flex line.
- **Main axis:** The primary axis along which the flexible components are arranged. Depending on the **flex-direction** property, this can be either vertical or horizontal.
- **main-start edge and main-end edge:** Flex items are arranged in the flex container from the main-start edge toward the main-end edge.
- **Cross axis:** Axis perpendicular to the main axis.
- **cross-start edge and cross-end edge:** In the container, flex lines start at the cross-start edge and end at the cross-end edge.

## Getting Started

To start using the flexbox layout module, you first need to define the container as a flex container. Take a look at the following example.

```xml
<div class="flex-container">
   <div class="flex-item">1</div>
   <div class="flex-item">2</div>
   <div class="flex-item">3</div>
   <div class="flex-item">4</div>
   <div class="flex-item">5</div>
</div>
```

What you have to do is to set the container’s **display** property to **flex**. Then, it automatically converts the flex container’s direct child elements to flex items.

![Flex container (green area) with five flex items](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-container-green-area-with-five-flex-items.png)

## Flex Container Properties

Flex container properties define how browsers should lay out the items within the flexible box. There’re six flex container properties. Let’s walk through them:

- **flex-direction:** Specifies the direction in which the flex items should be positioned inside the flexible container. Flexbox is a single-direction layout concept. Therefore, the flex items can only be stacked in vertical columns or horizontal rows. The **flex-direction** property accepts four values:
  - **row (default):** Stacks the flexible items horizontally, from left to right.
  - **column:** Stacks the flexible items vertically, from top to bottom.
  - **row-reverse:** Stacks flex items horizontally, from right to left.
  - **column-reverse:** Stacks flex items vertically, from bottom to top. ![CSS Flex-direction](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-direction.png)
- **flex-wrap:** Flex items will attempt to fit into a single line by default. Thus, the excess items will overflow the container if all the flex items’ combined height (or width) is greater than the flexbox’s height (or width). **flex-wrap** indicates whether the overflowing flex items should be wrapped across multiple lines or not. The **flex-wrap** property accepts the following three values:
  - **nowrap (default):** Forbids wrapping the flex items and forces all the items to be on a single line. This may cause an overflow of flex items out of the container.
  - **wrap:** Wraps the flex items into multiple lines, if necessary.
  - **wrap-reverse:** Functions similarly to **wrap** but in reverse order. ![CSS flex-wrap](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/flex-wrap.png)
- **flex-flow:** This is the shorthand property to simultaneously set both **flex-direction** and **flex-wrap** properties. Refer to the following code example.
```js
.flex-container {
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

```
You can alternatively use the following.

```js
.flex-container {
  display: flex;
  flex-flow: row-reverse wrap;
}

```
- **justify-content:** Used to specify how the browser should align the flex items along the main axis of the flexbox. It defines how the space between and around the flexible items is distributed along the container’s main axis. The following values are accepted for this property:
  - **flex-start (default):** Aligns the flex items to the beginning (main-start edge) of the flexbox’s main axis.
  - **flex-end:** Aligns the flex items to the end (main-end edge) of the flexbox’s main axis.
  - **center:** Flexible items are centered along the flexbox’s main axis.
  - **space-around:** Flex items are evenly distributed along the main axis by allocating equal space to both sides of an item. Here, the space between the container’s main-start (or main-end) edge and the first (or last) flex item is half the width of the area compared to the distance between the two items.
  - **space-between:** Aligns the first item to the main-start edge and the last item to the main-end edge of the main axis and creates even spacing between each adjacent flexible item.
  - **space-evenly:** Within the container, flex items are distributed uniformly along the main axis. The space between each pair of subsequent items is equivalent to the distance between the first (or last) flex item and the container’s main-start (or main-end) edge. 
![CSS Flex justify-content](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-justify-content.png)
  - 
**align-items:** Used to specify how the browser should position the flex items along the cross-axis of the flexbox. Its behavior is similar to **justify-content** but perpendicular to the main axis. The following values are accepted for this property: 
      - **stretch (default):** Stretches the flex items to fill the container’s vertical space while respecting the height and width constraints.
      - **center:** Aligns the flex items to the middle of the container, or in other words, to the center of the container’s cross-axis.
      - **flex-start:** Aligns the flex items at the cross-start edge. This means flexible items are aligned vertically at the top of the container.
      - **flex-end:** Aligns the flex items at the cross-end edge. This means flexible items are vertically aligned at the bottom of the container.
      - **baseline:** Aligns the flex items at the baseline of the cross-axis.
 ![CSS Flex align-items](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-align-items.png)
- **align-content:** Its behavior is similar to how the **justify-content** aligns flex items along the main axis when there’s extra space available in the main axis. But instead of the items, **align-content** aligns the flex lines and tells the browser how to position the flex container’s lines along the cross-axis. The following values are accepted for this property:
  - **stretch (default):** Fills up the vertical space by equally distributing the remaining space amongst the flex lines.
  - **space-between:** The first and last flex lines are aligned to the cross-start and the cross-end edges of the container, respectively, while creating equal spacing between each pair of lines between the first and last lines.
  - **space-evenly:** Flex items are equally distributed by assigning even space above the first line, between two flex lines, and below the last line.
  - **space-around:** Similar to **space-evenly** , but here it adds equal spacing around each line. Therefore, the space before (or after) the first (or last) line is half the width of the distance between two adjacent lines.
  - **flex-start:** Each flex line will only fill the space it needs and move toward the cross-start edge of the container.
  - **flex-end:** Each line will only fill the space it needs and move toward the container’s cross-end edge.
  - **center:** Similar to **flex-start** and **flex-end** , but the flex lines are aligned to the center of the container’s cross-axis. ![CSS Flex align-content](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-align-content.png)

**Note:**  **align-content** doesn’t work on single-line flex containers. To have an effect, the flexbox must be a multiline container with the **flex-wrap** property set to either **wrap** or **wrap-reverse**.

## Flex Item Properties

Flex item properties define how browsers should lay out a specific item within the flexible box. There are six types of flex container properties. Let’s walk through them:

- **order:** By default, flex items are positioned based on the order defined in the HTML code. The **order** property specifies the order in which the flex items should appear in the flex container. The value must be a number, and by default, it is 0. ![CSS Flex container with order property](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-container-with-order-property.png)

Take a look at the previous example. I’ve set the order property value of the first and last items to **order: 5** and **order: 1** , respectively, to swap the two elements.

**Note:** Try to rearrange the HTML code and use the **order** property only if it’s actually required, as it can confuse the readers of the HTML document.

- **flex-grow:** Defines how much a flex item should grow relative to the other flex items inside the same container to fill up the excess space of the container. The value should be unitless, and the default is 0. If the **flex-grow** property is set to an equal value for all flex items, the remaining space of the flexbox will be distributed evenly among all items.  
 ![CSS flex-grow](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/CSS-flex-grow.png)
- **flex-shrink:** Defines how much a flex item should shrink relative to the other flex items when there’s not enough space in the container. The default value is 1.  
 ![CSS flex- shrink property](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/CSS-flex-shrink-property.png)

- **flex-basis:** Defines the initial length of a flex item.

- **flex:** The shorthand property to set the **flex-grow** , **flex-shrink** , and **flex-basis** values at once. The default is **flex: 0 1 auto**.

**Note:**  **flex: initial** (default) is equivalent to **flex: 0 1 auto** ; **flex: auto** is equivalent to **flex: 1 1 auto** ; **flex: none** is equal to **flex: 0 0 auto** ; **flex: inherit** inherits the flex property values of its parent element, as the name suggests.

- **align-self:** This works similarly to the **align-items** property. However, the **align-self** doesn’t impact every flexible item in the container but only a selected item. Furthermore, it overrides the **align-items** property and defines the alignment of a selected item inside the flexbox. ![CSS Flex align-items property](https://www.syncfusion.com/blogs/wp-content/uploads/2023/03/Flex-align-items-property.png)

## Conclusion

This article discussed everything you need to know about the flexbox layout module to create a responsive website layout. However, it is vital to note its shortcomings. Although the flexbox layout works well for pages, it needs more flexibility in large and complex applications, especially when resizing, shrinking, stretching, or changing orientation.

The Syncfusion [JavaScript suite](https://www.syncfusion.com/javascript-ui-controls "Syncfusion JavaScript UI components") will be the only suite you will ever need to build an application. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download the [free trial](https://www.syncfusion.com/downloads/essential-js2 "Free evaluation of the Syncfusion Essential Studio") and evaluate the controls today.

If you have any questions or comments, you can contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [Top 8 JavaScript Notification Libraries](https://www.syncfusion.com/blogs/post/top-8-javascript-notification-libraries.aspx "Blog: Top 8 JavaScript Notification Libraries")
- [10 Tips and Tricks to Handle JavaScript Objects](https://www.syncfusion.com/blogs/post/10-tips-and-tricks-to-handle-javascript-objects.aspx "Blog: 10 Tips and Tricks to Handle JavaScript Objects")
- [5 Best Practices in Handling HTTP Errors in JavaScript](https://www.syncfusion.com/blogs/post/handling-http-errors-javascript.aspx "Blog: 5 Best Practices in Handling HTTP Errors in JavaScript")
- [Integrating JavaScript Scheduler with PHP and MySQL for Dynamic CRUD Operations](https://www.syncfusion.com/blogs/post/javascript-scheduler-with-php-and-mysql-for-dynamic-crud-operations.aspx "Blog: Integrating JavaScript Scheduler with PHP and MySQL for Dynamic CRUD Operations")