Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (2022)

This comprehensive CSS flexbox cheatsheet will cover everything you need to know to start using flexbox in your web projects.

CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space. It makes responsive design easier.

CSS flexbox is great to use for the general layout of your website or app. It's easy to learn, is supported in all modern browsers, and it doesn't take that long to figure out the basics. By the end of this guide, you'll be ready to start using flexbox in your web projects.

The article includes helpful animated gifs from Scott Domes which will make flexbox even easier to understand and visualize.

All CSS Flexbox properties

Here is a list of all the CSS flexbox properties that can be used to position elements in CSS. Next, you'll see how they work.

ADVERTISEMENT

CSS that can be applied to the container

display: flexbox | inline-flex;flex-direction: row | row-reverse | column | column-reverse;flex-wrap: nowrap | wrap | wrap-reverse;flex-flow: <‘flex-direction’> || <‘flex-wrap’>justify-content: flex-start | flex-end | center | space-between | space-around;align-items: flex-start | flex-end | center | baseline | stretch;align-content: flex-start | flex-end | center | space-between | space-around | stretch;

CSS that can be applied to items/elements in the container

order: <integer>;flex-grow: <number>; /* default 0 */flex-shrink: <number>; /* default 1 */flex-basis: <length> | auto; /* default auto */flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]align-self: auto | flex-start | flex-end | center | baseline | stretch;

Terminology

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (1)

Before you learn what the flexbox properties do, it's important to understand the associated terminology. Here are definitions of the key flexbox terms, taken from the official W3C specification for flexbox.

  • main-axis: The main axis of a flex container is the primary axis along which flex items are laid out. The direction is based on the flex-direction property.
  • main-start | main-end: The flex items are placed within the container starting on the main-start side and going toward the main-end side.
  • main size: The width or height of a flex container or flex item, whichever is in the main dimension, is that box’s main size. Its main size property is thus either its width or height property, whichever is in the main dimension.
  • cross axis: The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.
  • cross-start | cross-end: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.
  • cross size: The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.

ADVERTISEMENT

CSS Display Flex

display: flex is tells your browser, "I wanna use flexbox with this container, please."

(Video) Learn Flexbox in 15 Minutes

A div element defaults to display:block. An element with this display setting takes up the full width of the line it is on. Here is an example of four colored divs in a parent div with the default display setting:

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (2)

To use flexbox on a section of your page, first convert the parent container to a flex container by adding display: flex; to the CSS of the parent container.

This will initialize this container as a flex container and apply some default flex properties.

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (3)

Flex Direction

flex-direction allows you to control how the items in the container display. Do you want them left to right, right to left, top to bottom, or bottom to top? You can do all of these easily by setting the flex-direction of the container.

The default arrangement after applying display: flex is for the items to be arranged along the main axis from left to right. The animation below shows what happens when flex-direction: column is added to the container element.

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (4)

You can also set flex-direction to row-reverse and column-reverse.

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (5)

Justify Content

justify-content is a property to align items in the container along the main axis (see terminology diagram above). This changes depending on how content is displayed. It allows us to fill any empty space on rows and define how we want to ‘justify’ it.

Here are our the most common options used to justify content: flex-start | flex-end | center | space-between | space-around.

(Video) Flexbox design patterns you can use in your projects

Here is what the different options look like:

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (6)

space-between distributes items so that the first item is flush with the start and the last is flush with the end. space-around is similar but items have a half-size space on either end.

ADVERTISEMENT

Flex Align Items

align-items allows us to align items along the cross axis (see terminology diagram above). This allows content to be positioned in many different ways using justify content and align items together.

Here are the most common options used to align items: flex-start | flex-end | center | baseline | stretch

For stretch to work how you would expect, the height of the elements must be set to auto instead of a specific height.

This animation shows what the options look like:

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (7)

Now we'll use both justify-content and align-items. This will show off the difference between the main axes and the cross axes.

(Video) CSS Flexbox Crash Course

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (8)

Align Self

align-self allows you to adjust the alignment of a single element.

It has all the same properties of align-items.

In the following animation, the parent div has the CSS align-items: center and flex-direction: row. The first two squares cycle through different align-self values.

Flexbox - The Ultimate CSS Flex Cheatsheet (with animated diagrams!) (9)

Flex Wrap

Flexbox by default will try to fit all elements into one row. However, you can change this with the flex-wrap property. There are three values you can use to determine when elements go to another row.

The default value is flex-wrap: nowrap. This will cause everything to stay in one row from left to right.

flex-wrap: wrap will allow items to pop to the next row if there is not enough room on the first row. The items will be displayed from left to right.

flex-wrap: wrap-reverse also allows items to pop to the next row but this time the items are displayed from right to left.

ADVERTISEMENT

(Video) Learn flexbox the easy way

Flex Flow

flex-flow combines the use of flex-wrap and flex-direction into one property. It is used by first setting the direction and then the wrap. Here is an example: flex-flow: column wrap;

Align Content

align-content is used for aligning items with multiple lines. It is for aligning on the cross axis and will have no effect on content that is one line.

Here are the options: align-content: flex-start | flex-end | center | space-between | space-around | stretch;

Vertically Centering with Flexbox

If you want to vertically center all the contents inside a parent element, use align-items. Here is the code to use:

.parent { display: flex; align-items: center;}

ADVERTISEMENT

Games and Apps

If you want to practice using flexbox, try out these games and apps that will help you master flexbox.

  • Flexbox Defense is a web game where you learn flexbox while trying to stop the incoming enemies from getting past your defenses.
  • Flexbox Froggy is a game where you help Froggy and friends by writing CSS code.
  • Flexyboxes is an app that allows you to see code samples and change parameters to see how Flexbox works visually.
  • Flexbox Patters is a website that shows off a bunch of Flexbox examples.

Conclusion

We've covered all the most common CSS flexbox properties. The next step is practice! Try making a few projects using flexbox so you can get used to how it works.

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

(Video) CSS Flexbox Tutorial | Learn To Create Layouts Using CSS | Learn HTML And CSS | Flexbox Tutorial

FAQs

What does flex 1 do in CSS? ›

flex: 1 sets flex-grow to 1 (whereas the default value is 0 ). What this does: If all items have flex-grow set to 1, the remaining space in the container will be distributed equally to all children.

Why should we use display flex on a parent DIV? ›

Why choose flexbox? In a perfect world of browser support, the reason you'd choose to use flexbox is because you want to lay a collection of items out in one direction or another. As you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items.

What is inline Flex? ›

The element itself is formatted as an inline element, but you can apply height and width values. inline-flex. Displays an element as an inline-level flex container. inline-grid. Displays an element as an inline-level grid container.

What is flexbox used for in CSS? ›

CSS flexbox layout allows you to easily format HTML. Flexbox makes it simple to align items vertically and horizontally using rows and columns. Items will "flex" to different sizes to fill the space. It makes responsive design easier.

What is the use of flex in HTML? ›

The flex property sets the flexible length on flexible items. Note: If the element is not a flexible item, the flex property has no effect.

What is Flex-basis 0%? ›

Flex-basis overrules any specified CSS width value, so if you set flex-basis to 0, it doesn't fall back to the CSS "width" value.

Which is better grid or flexbox? ›

If you are using flexbox and find yourself disabling some of the flexibility, you probably need to use CSS Grid Layout. An example would be if you are setting a percentage width on a flex item to make it line up with other items in a row above. In that case, a grid is likely to be a better choice.

Should I learn flexbox or grid? ›

Flexbox is best for arranging elements in either a single row, or a single column. Grid is best for arranging elements in multiple rows and columns. The justify-content property determines how the extra space of the flex-container is distributed to the flex-items.

Is flexbox responsive? ›

Flexbox is a relatively new front-end feature that makes building a website layout (and making it responsive!) much, much easier than it used to be. In days past, to build a website, you would have to use float grids or even tables to make your layout look like it should.

Is flexbox a block element? ›

When we add display: flex , we are really defining display: block flex . The outer display type of our flex container is block ; it acts like a block level element in normal flow. The inner display type is flex , so items directly inside our container will participate in flex layout.

Is flexbox inline or block? ›

There is absolutely no difference in the effect on flex items; flex layout is identical whether the flex container is block-level or inline-level. In particular, the flex items themselves always behave like block-level boxes (although they do have some properties of inline-blocks).

What is block Flex? ›

Block: Displays an element as a block element. It starts on a new line and takes up take up as much horizontal space as they can. Block-level elements do not appear in the same line, but breaks the existing line and appear in the next line. Flex: Flex displays an element as a flexible structure.

What does flex grow 1 mean? ›

“For example, if all items have flex-grow set to 1, every child will set to an equal size inside the container. If you were to give one of the children a value of 2, that child would take up twice as much space as the others.”

What does flex 1 mean react native? ›

Normally you will use flex: 1 , which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the flex given, the higher the ratio of space a component will take compared to its siblings.

How do I center a div in CSS? ›

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

Videos

1. #36 CSS Flexbox Tutorial for Beginners [Complete Guide] - CSS Full Tutorial
(Dev Dreamer)
2. Build an HTML + CSS Layout with Flexbox in just a few lines of code
(LearnCode.academy)
3. CSS GRID With Flexbox | Beginner to Pro Tutorial
(Tyler Potts)
4. Flexbox | CSS | Tutorial 13
(Mike Dane)
5. CSS Layout: Flexbox & Grid Basics
(LearnWebCode)
6. Complete Flexbox Tutorial with Cheat Sheet 2021 🎖️|| CSS Flex Box 2021
(Joy Shaheb)

You might also like

Latest Posts

Article information

Author: Annamae Dooley

Last Updated: 10/18/2022

Views: 6346

Rating: 4.4 / 5 (65 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Annamae Dooley

Birthday: 2001-07-26

Address: 9687 Tambra Meadow, Bradleyhaven, TN 53219

Phone: +9316045904039

Job: Future Coordinator

Hobby: Archery, Couponing, Poi, Kite flying, Knitting, Rappelling, Baseball

Introduction: My name is Annamae Dooley, I am a witty, quaint, lovely, clever, rich, sparkling, powerful person who loves writing and wants to share my knowledge and understanding with you.