CSS Flexbox: A Complete Guide

If you've ever tried to create a layout with CSS, you know that it can be a bit of a struggle to get everything to line up just right. That's where the CSS flex property comes in.

Introduced in CSS3, the flexbox layout module provides a more efficient way to arrange elements on a page.

But what exactly is flexbox, and how can you use it to make your web designs more responsive and dynamic? In this post, we'll dive into the basics of the CSS flex property and explore some examples that demonstrate its use.

Table of Contents

• What is the CSS Flex Property?
• CSS Flex Syntax
• CSS Flex Property Values
• CSS Flex Parent & Child Properties
• CSS Flex Property Example
• CSS Flexbox, Explained
• CSS Flexbox Example

What is the CSS Flex property?

The flex property is a versatile command that enables developers to create flexible and adaptive layouts for web pages. This property allows elements of a webpage to be sized and arranged relative to one another, rather than having to specify exact dimensions.

The flex property is actually a shorthand property for a few other flex properties:

• flex-grow

• flex-shrink
• flex-basis

These determine the length of an element and whether it will grow or shrink based on the other elements in the container.

The flex property is particularly useful for responsive design, as it allows elements to be scaled and rearranged based on the size of the screen. For example, a row of images on a desktop screen can be easily rearranged into a column on a mobile device, simply by changing the flex-direction property from row to column.

ADD IMAGE/Visual HERE

Another key benefit is its ability to simplify and reduce the amount of code required to create responsive layouts. With flex, it's possible to create complex, multi-column designs with fewer lines of code than traditional techniques like floats and positioning.

CSS Flex Syntax

The flex property works by setting a parent element to display: flex, which then gives you access to a number of other flexible layout properties. Two of the most popular properties are justify-content and align-items. Justify-content determines how the items within a flex container are spaced out along the main axis, while align-items control their position along the cross-axis.

Let’s take a look at a few examples of this syntax. Here is the basic keyword syntax for the CSS flex property:

You can also define the flex property using percentages, ems, and pixels. There are also a few global values that you can use with this property as well:

• Inherit
• Unset
• Revert

Let’s review what each of these values does in more detail.

CSS Flex Property Values

1. Auto

This value sets the flex-basis to auto which means that the item will be sized based on its content, and can grow or shrink as needed.

Example:

In this example, the item will be given a default size based on its content and will be allowed to grow or shrink as needed.

2. Initial

This value sets the flex item's properties to their default or initial value. 

Example:

In this example, the item will have a flex-basis of 0, and will be allowed to shrink or grow by an equal percentage.

3. None

This value sets the item's flex container to 0, which means it will neither grow nor shrink when extra space or a lack of space exists.

Example:

In this example, the item will have a fixed, non-flexible size.

4. Inherit

This value sets the item's flex properties to be inherited from its parent property.

Example:

In this example, the item will have the same flex properties as its parent property.

5. Unset

This value sets the item's flex properties to the default value if not previously set; otherwise, it sets it to the inherited value.

Example:

In this example, the item will inherit its flex properties, or revert to the default value if not explicitly set.

6. Revert

This value sets the item's flex properties to their default values as if no value had ever been set.

Example:

In this example, the item's flexbox properties will revert back to their original default values.

CSS Flex Parent & Child Properties 

Below are the different CSS flex properties for both parent and child elements. Let’s review what each one does, then look at an example where they are used in action.

CSS Flex Parent Properties

1. Display

This property defines the container type you want to create. The default value is block. To enable flexbox, you would set the display property for the container element to flex or inline-flex, depending on your layout needs.

2. Align-items

This property controls how the items inside the flex container align along the cross-axis (the perpendicular axis to the main-axis direction). It allows you to align items either at the start, center, end, or stretch across the cross-axis.

3. Flex-Flow

This property is a shorthand for two other properties, flex-direction and flex-wrap. It defines the direction in which the flex items flow and whether they should wrap or not. The default value is row nowrap, which means the items flow horizontally in a single line without wrapping.

4. Flex-Wrap

This property controls whether the flex items should wrap or not when they exceed the width of the flex container. You can set the value to nowrap (default), wrap, or wrap-reverse, depending on your layout needs.

5. Justify-Content

This property controls how the items inside the flex container align along the main axis (the axis in which the flex-direction flows). It allows you to align the items either at the start, center, end, space-between, space-around, or space-evenly of the main axis.

CSS Flex Child Properties

6. Order

This property lets you define the order of the flex items, controlling the layout order regardless of the source order in the HTML markup.

7. Flex-Grow

This property sets how much the flex item should grow relative to other flex items when there is unused space along the main axis. The larger the value, the larger the item will proportionally grow.

8. Flex-Shrink

This property sets how much the flex item should shrink relative to other flex items when there is not enough space along the main axis. The larger the value, the smaller the item will proportionally shrink.

9. Flex-Basis

This property sets the initial size of the flex item along the main axis before any remaining space is distributed. It can be set to a specific value (such as pixels) or a keyword (such as auto, which uses the element's default size).

Now that we have gone over the most popular CSS flex properties and their potential values, let’s see them put into action in an example.

CSS Flex Property Example

Say we have a container <div> element with three child <div> elements, each representing an item.

If we add the display: flex property on the container, it will enable the flexbox layout for its children. Assigning the flex: 1 property to the child items allows them to grow and occupy equal space within the container. To ensure items are spaced evenly, you can add the justify-content: space-between property to your stylesheet. Lastly, add some other styling properties, such as padding, background color, and borders, for a more elaborate visual representation.

Here is your end code:

See the Pen CSS Flexbox by HubSpot (@hubspot) on CodePen.

In the explanation above, we mentioned that this created a “flexbox layout.” Let’s talk more about what this is in the next section.

The CSS Flexbox, Explained

The CSS flexbox is a layout module that creates complex, multi-column designs using very little code. Unlike the CSS grid, which is a two-dimensional layout system, the flexbox is one-dimensional that focuses on arranging elements along a single axis (either horizontally or vertically).

One of the key benefits of the CSS flexbox is that it can simplify your code and make layouts more scalable. You can create layouts that adapt to different screen sizes and devices, ensuring that your site looks great no matter how your users are accessing it. This can be particularly important for mobile users, who may be accessing your site on a range of different devices and screens.

How to Use CSS Flexbox

To start, set the container to display: flex. Now you can use different properties like flex-wrap and flex-basis to define how the child elements should be arranged. This allows you to control the positioning and sizing of elements on your page with ease, without the need for complex calculations or adjustments.

Let’s look at an example.

CSS Flexbox Example

Suppose you want to create a responsive, two-column layout for your website's homepage. One column will contain a heading and some introductory text, while the other will contain a contact form.

To start, you'll need to create a container that will hold your two columns. You can do this by adding the following CSS:

The display: flex property sets your container to be a flexbox element. The flex-wrap property tells the container to wrap its child elements onto the next line if there's not enough space for them on the first line.

Now, create two child elements, one for each column. You can do this using the following code:

Here, the flex-basis property sets the width of each column to be 50% of the container width, so they will be equal in size. The padding and box-sizing properties are used to add padding to the columns without affecting their total width.

Now that you've set up your container and your columns, you can start adding content. Here's an example of what your HTML might look like:

See the Pen CSS Flexbox 2 by HubSpot (@hubspot) on CodePen.

And that's it. With just a few lines of CSS and some simple HTML, you can create a responsive, two-column layout using the CSS flexbox. You can further customize your layout by adjusting the properties mentioned above to fine-tune the behavior of the flexbox container and its child elements.

Using the CSS Flex Property

The CSS flex property is a powerful tool for creating versatile and responsive layouts in your web projects. With its comprehensive set of properties and options, the flexbox layout module enables designers and developers to create complex and dynamic designs that can adapt to different screen sizes, devices, and user interactions.

Whether you're building a simple landing page or an advanced web application, mastering the basics of the CSS flex property is an essential step towards building more efficient and effective web designs.