CSS Flexbox allows you to easily format your HTML like you never knew was possible. With Flexbox you can align vertically and horizontally, easily. Like the sound of that? Yeah, so do I.
Flexbox is also super useful when you're creating the general layout of your website or app. It is easy to learn, well-supported (in all modern browsers) and is great to work with – not to mention it doesn’t take long to get the basics.
So let's dive right in and learn more.
Here is a list of the Flexbox properties that can be used to position elements in CSS:
CSS that can be applied to a 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 a 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;
So now you have your toolkit. But you might ask “What do I do with my tools, and how do I use them?” Well, let me show you.
display: flex; just tells your browser, "hey I would like to use Flexbox with this container, please." This will initialize this box as a Flex container and apply some default Flex properties.
This is what our container looks like without
display: flex; we get the below – you can see that the default Flex properties are applied causing it to look like this:
flex-direction: allows us to control how the items in the container are displayed. Do you want them left to right, right to left, top to bottom or bottom to top? You can do all this easily by setting the Flex direction of the container.
Flexbox applies rows as the default for the direction. Here is what they all look like:
Flexbox by default will try to fit all elements into one row. But you can change this with the flex-wrap property. This allows you to choose whether the elements will spill over or not.
There are 3 properties for
flex-wrap: nowrap is the default and will try to fit everything in one row from left to right.
flex-wrap: wrap allows items to go on to create multiple rows from left to right.
flex-wrap: wrap-reverse allows items to be on multiple rows but displays right to left this time.
Flex flow combines the use of
flex-direction into one property. It is used by first setting the direction and then the wrap.
flex-flow: column wrap; is an example if how to use this.
justify-content is a property that aligns items in the container along the main axis (this changes depending on how content is displayed).
There are multiple options for this. It allows us to fill any empty space in rows but lets us define how we want to ‘justify’ it.
Here are our options when we justify our content:
flex-start | flex-end | center | space-between | space-around;.
Align items allows us to align items along the cross-axis. This allows content to be positioned in many different ways using justify content and aligns items together.
align-items: flex-start | flex-end | center | baseline | stretch;
This is 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.
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
Other resources on Flexbox and Grid
Articles and courses
Games and Apps
Flexbox Defense is a web game that teaches flexbox the fun way.
Flexbox Froggy is also a web game that teaches flexbox the fun way.
Flexbox in 5 is a web app that allows you to be able to see how flexbox works with a few simple controls.
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 loads of flexbox examples.