Flexbox Essentials for Beginners

Updated June 20, 2023

Introduction

The concept behind Flexbox properties is to allow the container to automatically change its items’ width, height, and order to fill up the space available best. This can be useful to accommodate items within different screen sizes and devices. Items are expanded to fill free space or shrunk to avoid an overflow.

CSS Flexbox Grid For Beginners

CSS is one of the first and easiest things to learn in web development and design, but don’t mistake its simplicity for a lack of features. Flexbox properties are among the many unique features and capabilities that CSS has to offer. They have become more prominent in recent years due to their ability to provide powerful layout options.

Flexbox properties are one of the newer layouts available to CSS3; there’s much to learn about it. Here, we get hands-on with the layout and how to use it. Before we begin, though, here’s a little background on Flexbox properties:

What are Layout Modes?

In the simplest terms, the CSS Flexbox grid is a layout mode. CSS has several existing layout modes. The block layout mode (like display: block) has been around for a long while. Block layouts are a good choice to style full documents. A web browser treats several elements like divs and paragraphs as block-level by default.

Another standard layout mode is inline. The strong, input, and anchor tags are examples of inline-level elements. Google Chrome’s developer tools allow you to view an element’s “computed style,” which reveals the CSS properties and values applied to the element, including those not explicitly set by the developer.

The relatively newer Flexbox properties (Flexible box) layout has been designed as a more efficient method of laying out, aligning, and distributing space among container items, even if the size of these items is dynamic or unknown. Hence the term ‘flexible.’

The Flexbox Properties Concept

The most important thing about Flexbox properties is that it is direction-agnostic.

Flexbox is unlike block layout, which is based on vertical orientation, and inline layout, which is based on horizontal orientation, as it can be used for horizontal and vertical layouts.

Block and inline work well in the right situations but lack the flexibility to support complicated or large applications, particularly when it comes to changing orientation, stretching, shrinking, resizing, and otherwise changing up the dimensions of the elements.

Where are Flexbox Properties Used?

Flexbox is best suited for specific use cases like any other CSS layout. In particular, it is appropriate for small-scale layouts and components of an application. For larger-scale layouts, a Grid layout would be the wiser choice.

Why is Flexbox Preferred?

Many developers and designers prefer Flexbox properties whenever possible (sometimes too often!). This is because Flexbox properties are easier to use; the positioning of the elements is much simpler, so you can get more complex layouts with less coding. In other words, it makes the development process simpler.

A Guide to Flexbox Properties

Now that you know a little bit about Flexbox properties and how and why it works, here is a detailed guide to the layout. The layout model comprises a parent container, also known as a “flex container,” which contains immediate children referred to as “flex items.”

Since its initial draft in 2009, the Flexbox layout has undergone several iterations and syntax changes. The following web browsers support the latest version of the Flexbox specification:

• Opera 17+
• Internet Explorer 11+
• Mozilla Firefox 28+
• Google Chrome 29+
• Apple Safari 6.1+
• Android 4.4+
• iOS 7.1+

Terminology Used in Flexbox Properties

Here is a look at some basic terminology used in the Flexbox properties layout:

• Display: This command is used to define the flex container. It could be inline or block, depending on the It also defines flex content for all the items within the container. Example:

.container {
display: flex; /* or inline-flex */
}

• Order: Flex items are laid out according to the source order by default, but the ‘order’ property can control the order in which the items appear within the container. Example:

.item {
order: <integer>;
}

• Flex-direction: This order sets up the main axis, defining the direction in that flex items are placed within the container. Flex items can be primarily laid out in vertical or horizontal directions. Example:

.container {
flex-direction: row|row-reverse|column|column-reverse;
}

• Flex-grow: This order defines the flex item’s ability to scale up if it has space automatically. It can accept a unitless value to serve as a proportion. This value dictates how much space the item should occupy within the flex container. For instance, if all items have a flex-grow set as 1, the remaining space within the container will be equally distributed to all the children. If the value is 2, the remaining space will take up twice as much as the rest. Example:

.item {
flex-grow: <number>; /* default 0 */
}

• Flex-shrink: This does the opposite of flex-grow; it shrinks the flex items when necessary. Example:

.item {
flex-shrink: <number>; /* default 1*/
}

• Flex-basis: The flex-basis property sets an element’s default size before any remaining space is distributed among the flex items. It could be a length, like 5rem or 20%, or a keyword. The ‘auto’ keyword indicates that the item’s width and height be measured, and the ‘content’ keyword indicates that the item is sized based on its content. Example:

.item {
flex-basis: <length>  | auto; /* default auto */
}

• Flex: This is a combined shorthand for the above three properties: flex-grow, flex-basis, and flex-shrink. The default is ‘0 1 auto’.

.item {
flex: none | [ <'flex-grow'> <flex-shrink'> || <'flex-basis'> ]
}

• Justify-content: This order defines the main axis alignment and helps distribute the additional free space if there is any left when the items are inflexible or have reached their maximum size. This also helps control the item’s alignment when there is an overflow.

.container {
justify-content: flex-start| flex end | center | space-between | space-around;
}

• Align-items: This defines the default behavior of flex items’ layout on the current line’s cross-axis. It is essentially a version of ‘justify-content’ on the cross-axis, which is perpendicular to the central axis. Example:

.container {
align-items: flex-start | flex-end | center | baseline | stretch;
}

• Align-content: This order aligns the container lines in case additional space is on the cross-axis. It is similar to ‘justify-content’, but for the cross axis instead of the main axis. This property has no effect if just one line of flex items exists. Example:

.container {
align-content: flex-start | flex-end | center | space-between | space-around| stretch;
}

Using Flexbox properties

To use the Flexbox layout, you can set the display property on the HTML parent element, like below:

.flex-container {
display: -webkit-flex; /* Safari */
display: flex;
}

If you prefer to display like an inline element, you could write in:

.flex-container {
display: -webkit-inline-flex; /* Safari */
display: inline-flex;
}

You only need to set this property on the parent flex container and its direct flex items. The container children will automatically become flex items.

Flex Container Properties

There are many ways to group Flexbox properties, and the easiest way to learn about them is by splitting them into Flex container and item properties. We’ve just covered some of the flex container properties above. Let’s look at the rest:

1. Flex-direction: row or column

The flex-direction property can lay out flex items in columns (vertically) or rows (horizontally). The flex items are arranged from left to right by default when using the row direction in Flexbox. Row-reverse changes this direction to right-to-left. The column direction is top-to-bottom by default, and the column-reverse function reverses this to a bottom-to-top direction.

2. Flex-wrap: nowrap or wrap

Using the flex-wrap property, you can control how the children of a flex container are arranged, whether in a single line or multiple lines and the direction in which new lines are stacked. The nowrap value sees flex items displayed in a single row, shrunk to fit the container’s width by default. The wrapped value sees flex items displayed in different rows in a left-to-right or top-to-bottom direction. You could add wrap-reverse to change the order too. The default value is nowrap.

3. Flex-flow

This property is a shorthand to set the flex-direction and flex-wrap properties together. The default value is ‘row nowrap’. Example:

.flex-container {
flex-flow: <flex-direction> || <flex-wrap>
}

4. Justify-content

The justify-content property has four values: flex-start to align items to the left side of the container; flex-end to align items to the right side; center to align with the center; space-between to align objects with equal spacing between them, with the first and last items aligned to the container edges; and space-around for aligning the flex item with equal spacing around them, including the first and last items. Flex-start is the default value.

5. Align-items

This property has five values: stretch to scale up flex items to fill the whole width or height from cross start to cross the end of the container; flex-start to stack items at the cross start; flex-end to stack items at the cross end; center to align items to the center of the cross axis; and baseline to align items so that their baselines are aligned. Stretch is the default value.

6. Align-content

This property aligns a flex container’s lines when there is additional space in the cross-axis. Its values are: stretch to distribute space after every row; flex-start to stack items towards the cross start; flex-end to stack items towards the cross-end; center to stack items at the center of the cross axis; space-around to equally distribute space around flex items. The default value is stretch.

Flex Item Properties

Now that you know about Flexbox container properties, let’s look at the item properties:

1. Order

This property controls the order of appearance of the flex container’s children. The default behavior of the flex items is to be ordered within the flex container.

.flex-item {
order: <integer>;
}

You can reorder flex items without having to restructure the HTML code. The default value is zero.

2. Align-self

This property allows you to override the default alignment of a specific flex item. You can use the values from align-items for this property.

.flex-item {
align-self:  auto | flex-start | flex-end | center | baseline | stretch;
}

The value of the align-items on the element parent computes the auto value in align-self. If an element does not have a parent, it will use stretch instead.

Basic Examples

That’s all you need to know to use the CSS Flexbox grid layout. Now it’s time to practice what you learned. Here are some examples that show you how all these properties come together. Let’s begin with something straightforward:

.parent {
display: flex;
height: 300px;
}
.child {
width: 100px;
height: 100px;
margin: auto;
}

This is an example of perfect centering. You can change the height and width values as you wish. The key here is to set the margin to ‘auto’ so the flex container automatically absorbs any extra space. Simple enough!

Now, let’s move on to adding more properties: a list with six items of fixed dimensions that can be auto-sizable. You need to distribute them along the horizontal axis evenly.

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

Next, let’s try to center right-aligned navigation for medium-sized screens and make it single-columned on small devices.

/* Large */
.navigation {
display: flex;
flex-flow: row wrap;
justify-content: flex-end;
}
/* Medium screens */
@media all and (max-width: 800px) {
.navigation {
justify-content: space-around;
}
}
/* Small screens */
@media all and (max-width: 500px) {
.navigation {
flex-direction: column;
}
}

Time to take this one step further! Let’s try a mobile-first layout with three columns, with a full-width footer and header and independent from source order.

.wrapper {
display: flex;
flex-flow: row wrap;
}
/* We tell all items to be 100% width */
.header, .main, .nav, .aside, .footer {
flex: 1 100%;
}
/* We rely on source order for mobile-first approach*/
/* Medium screens */
@media all and (min-width: 600px) {
.aside { flex: 1 auto; }
}
/* Large screens */
@media all and (min-width: 800px) {
.main { flex: 2 0px; }
.aside-1 { order: 1; }
.main    { order: 2; }
.aside-2 { order: 3; }
.footer  { order: 4; }
}

Conclusion

These are just some basic examples. You can play around a lot more with CSS Flexbox grid layouts, and they are invaluable if you want to make a responsive webpage.

Recommended Articles

This has been a guide to Flexbox Essentials for Beginners. Here we discuss the basic concepts, covered some flex container properties, and basic examples. You can also go through our other suggested articles to learn more –

1. HTML vs XML
2. CSS3 vs CSS
3. HTML vs CSS
4. HTML5 vs Flash