To understand the "box-sizing: border-box" declaration in CSS3, see this illustration (open in new tab to see it bigger):

To fully understand it (this is the most difficult property in CSS), you should understand the box model in CSS.

Every HTML element has a box model. For example, this is a paragraph-element on some page:

The blue color alone is the 'content-box'. The size of the content-box is simply determined by the space that the text takes up. So, if you have a lot of text or a large font-size, this will increase the content-box. But it is also influenced by the characteristics of the font that you use (e.g. how much space a certain character actually takes up).

The green PLUS the blue color is the 'padding-box'.

The yellow PLUS the green PLUS the blue color is the 'border-box'.

Around the border, there is margin. But margin is not considered to be part of an element, it's space between elements. So we don't have a 'margin-box'.

The tricky part in practice with this is when you set a width or height.

If you set width: 100px on some HTML-element, what exactly should be 100px? The content-box, padding-box or border-box?

The default is content-box. Which means if you set width: 100px on some HTML-element, and you also have some padding and/or a border, the TOTAL width is bigger than 100px.

For example, width: 100px is 100px for content PLUS 20px for left-side-padding + 20px for right-side-padding PLUS 5px for left-side-border + 5px for right-side-border = 150px width in TOTAL.

This is very confusing in practice, because when we set width: 100px on some HTML-element we expect that to be the TOTAL width of the element. At least, that would be much easier to work with.

So to make width: 100px the actual TOTAL width of the element, we use box-sizing: border-box. Now when you set a width (or height), the border-box is that width (or height).

For example, by setting width: 100px, the browser knows that the TOTAL width of the element should be 100px. So if we have 40px for left- and right-side padding + 10px for left- and right-side border, that means there is 50px left for the width of the content.

So the browser will force the width of the content to be 50px, making sure that the TOTAL width of the element is 100px.

And again, margin is not taken into account, because it's not considered part of an element, but space between elements.

Also, you will often see people use this in their CSS reset, like this simple reset:

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

With the universal selector (*), we select all HTML elements except pseudo-elements, so we also select those individually with *::before and *::after.

Then set their box-sizing property to 'border-box', which is the only other option you have apart from the default 'content-box'.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

Here's a list of the most common properties you will use in Flexbox (from my own experience) -- try opening in a new tab for bigger version:

Here's a list of more rare properties with a brief explanation:

1. align-content -- use this instead of align-items when you have multiple rows/columns (which you will have when flex-items have wrapped onto new lines).

2. order -- use this to change the order of flex-items. This is something you want to do sometimes when you make your project responsive. Some flex-item may then fall below another flex-item, because limited space on e.g. mobile forces everything into a 1-column layout, and you don't want that flex-item to sit below another one. This property works with a number, the lowest numbers come first in the order.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

FacebookTwitterInstagram

In the past, if you wanted to create space between flex-items, you had to use the good ol' margin property.

That came with certain issues, so today we have a better solution: the 'gap'-properties.

These actually come from CSS Grid, but since Flexbox and CSS Grid are being harmonized (so we can use the same properties in both systems) we can now also use these with Flexbox.

So there is column-gap:

And row-gap:

And gap:

These properties were previously called 'grid-column-gap', 'grid-row-gap' and 'grid-gap', but like I said, they're now available in Flexbox too so the 'grid-' prefix was dropped.

Note that the 'gap'-properties won't work properly in Internet Explorer.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

FacebookTwitterInstagram

Flexbox is always about a so-called flex-container and its direct child elements -- which we call the flex-items.

In HTML this means there will be one HTML-element that will be the flex-container and its direct child elements in the HTML tree will be the flex-items.

The only thing we have to do to 'unlock' the functionalities of Flexbox is setting display: flex on the HTML element that we want to use as a flex-container:

When you do that, this is the default layout that is created.

The flex-items will sit on the same row, flowing from left to right.

We can now use other Flexbox-properties, like justify-content, align-items, etc. to position the flex-items like we want.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

FacebookTwitterInstagram

To 'unlock' the functionalities of Flexbox, simply pick an element and use display: flex:

This will give you the default layout.

The element with display: flex is the flex-container and its direct child elements are called the flex-items.

The flex-items are laid out horizontally next to each other in the default layout.

We can position these flex-items somewhere else, horizontally or vertically.

For example, horizontally we can do this by using justify-content:

And vertically we can use align-items:

Notice how the flex-items now always flow horizontally, they go from left to right.

Sometimes we want them to flow vertically, from top to bottom.

We can do that with flex-direction: column:

Then we can use justify-content and align-items again to position them differently, however now their axes have 'flipped'.

So now you need to use justify-content for the vertical axis and align-items for the horizontal axis:

Sometimes we just want to move 1 flex-item to a different position.

Select that one element and use align-self or margin: auto:

Also, if you have many flex-items or very large flex-items such that they do not fit, they will overflow the container or stretch the container out. You can make them wrap with flex-wrap: wrap:

And now if you want to position everything along the vertical axis, you should use align-content instead of align-items (use align-content when you have multiple rows/columns like we have now after wrapping):

I cheated a bit in the illustrations by giving the flex-items some space between them. In practice you need to use one of the gap properties to achieve that: column-gap, row-gap or gap.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

This is the default layout in Flexbox:

You set display: flex on an element. This makes that element the so-called flex-container and its direct child elements the so-called flex-items.

The flex-items are laid out horizontally next to each other, starting from the top-left corner.

Sometimes this is all you need.

However, let's say we want to position these flex-items differently. We have 2 major options: we can position them along the horizontal axis or the vertical axis.

To position the flex-items along the horizontal axis, use justify-content here:

or

Note that flex-end has better browser support at time of writing, but is being phased out in favor of end. This is because Flexbox and CSS Grid properties are being harmonized, so we can use the same properties in both systems. That's why the 'flex-' and 'grid-' prefixes are being dropped.

We can also align the flex-items vertically with align-items:

or

With Flexbox, the flex-items are always laid out along 1 direction: horizontal (row) or vertical (column). The default is horizontal (row).

However, sometimes we want it to be vertical (column):

When you do that, the align-items and justify-content properties 'flip', so now justify-content works for the vertical axis and align-items for the horizontal axis:

Sometimes, we only want to position 1 flex-item in a certain way, not all flex-items. We can do that by selecting that individual flex-item and using align-self instead of align-items:

For the other axis, there is no justify-self. Instead we should use margin: auto:

Here, margin will take up all the space left to the flex-item, pushing the flex-item itself all the way to the right.

Sometimes, you will have more flex-items than here or just a few very large ones. In that case, they may overflow the container or stretch the container out. Instead of that, you probably want them to wrap onto a new line if they don't fit.

Use flex-wrap: wrap to do that:

Here we have multiple rows now. If we want to center all of this vertically like before, we now have to use align-content instead of align-items:

So use align-items when you have 1 row or column, use align-content when you have multiple rows or columns (after wrapping).

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

FacebookTwitterInstagram

Let's start with the default layout in Flexbox:

If we want to center all of these flex-items vertically, we can simply use align-items: center:

However, what happens if we have many more flex-items? Or flex-items that are much bigger? Then we probably want them to wrap onto new lines if they don't fit:

Now, how do we vertically center all flex-items properly like before?

We have to use align-content:

Conclusion: use align-items when you have just 1 row (or 1 column, in case you use flex-direction: column), use align-content when your flex-items have wrapped onto new lines so that you have more than 1 row or 1 column.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

With Flexbox you can use multiple properties, for example:

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

This will work in 99.14% of cases, according to Can I Use.

In some old browser versions it won't work like this. You need to add a so-called prefix to the properties to make them work.

Prefixes are like '-webkit-' for webkit-based browsers, like Safari or older versions of Chrome.

Or -moz- for Firefox.

Or -ms- for Internet Explorer.

Years ago, browsers used these prefixes to indicate these properties were for testing.

For example, in Chrome version 28 you as a developer could start playing around / testing flexbox properties by using e.g. -webkit-align-items: center.

These prefixes were added because maybe later, after experimenting, the standardization process would change the name of these properties. So with a prefix it would clearly indicate that it was for experimental purposes only.

Then in Chrome version 29 you could start using align-items: center, without prefix.

However, some people never upgraded their browser to version 29. So they are still on e.g. Chrome version 28.

Reasons could be corporate computers that have a stricter updating process that never got around to it. People who use (old) software that only works on older versions and don't want to update their browser version because they might look access to that software or would be forced to pay for the software.

So for that super small percentage of people who are on those older browser versions, we should still use prefixes, so that it works in their browsers too.

You probably don't want to do that manually, so there is open-source software that will do it for you automatically, like Autoprefixer. You can use that as an NPM-package.

That will upgrade the above example from 99.14% to 99.7% coverage.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

You need to master both Flexbox and CSS Grid in order to professionally build modern websites & web apps. If you haven't mastered both of them yet, I highly recommend going through my CSS Course.

To start using Flexbox, you only have to use display: flex on an element. That will give you this default layout:

The element with display: flex will become the so-called flex-container, and its direct child elements become the flex-items.

We have now 'unlocked' Flexbox functionalities.

We can then use align-items to determine where along the vertical axis all the flex-items should be positioned.

For example, to position them in the center:

Or at the bottom:

Note that we used end here, but flex-end has better browser support. However, flex-end is being phased out, because the Flexbox & CSS Grid properties are being harmonized (so we can use the same properties in both systems). So the 'flex-' and 'grid-' prefixes get cut.

When you use flex-direction: column to change the direction that the flex-items should follow, things change.

Now 'align-items' doesn't determine where flex-items should be positioned along the vertical axis, but along the horizontal axis. And the justify-content property, that we haven't discussed here yet but is what you would use for horizontal positioning in the default situation, is now used for vertical alignment.

So things 'flip' when you use flex-direction: column.

If we now use align-items: center, we get this:

If you just want to align an individual flex-item, you can use align-self. An example:

Remember, when flex-direction: column, things switch:

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

To understand vertical aligning in Flexbox, let's start from the default layout in Flexbox:

We can use align-items to determine where along the vertical axis all flex-items should sit. For example, if we want them to sit in the center:

Or maybe we want them all to sit at the bottom:

Note that we used the value 'end' here, but 'flex-end' still has better browser support. However, 'flex-end' is being phased out and the future is 'end'. This is because Flexbox and CSS Grid are being harmonized so that we can use the same properties in both systems, so the 'flex-' and 'grid-' prefixes are being dropped.

This was for aligning ALL flex-items vertically, but what if we just want to vertically align an individual flex-item? We can use align-self for that:

Or use align-self: end to make it sit at the bottom:

Note that when you use flex-direction: column, the 'align'-properties will now work for the horizontal axis instead of the vertical axis.

This is the default layout when you use flex-direction: column:

Then you need to use justify-content to do vertical alignment for all flex-items:

Or for 1 individual flex-item, use 'margin' with 'auto':

The margin will now take up the space on top of the selected element, pushing itself downwards.

So there is no 'justify-self' property in Flexbox, because 'margin: auto' already takes care of what we want. Which is a bit confusing... I wish we had 'justify-self' in Flexbox.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

There are 2 major options in CSS3 to implement layouts: Flexbox & CSS Grid.

Flexbox is the one you want to use more frequently, in my experience.

It all starts by setting display: flex on a parent element:

This is the default layout: flex-items will be sitting on the same row next to each other.

Now we have 'unlocked' the Flexbox functionalities.

The element with display: flex is called the flex-container and its direct child elements are called the flex-items.

We can now use some Flexbox properties on both the flex-container and flex-items individually.

Let's say we want to center all flex-items horizontally. The justify-content property is used here for horizontal alignment:

Or maybe we want it to sit at the end, horizontally:

Note that you can also use 'flex-end' instead of 'end'. Flex-end still has better browser support, but the future is 'end' (the properties across Flexbox and CSS Grid are being harmonized -- i.e. the 'flex-' and 'grid-' prefixes will be removed so we have the same properties in both Flexbox & CSS Grid).

So justify-content is for horizontal alignment here, now we also want to look at vertical alignment. We can use align-items for that:

Or if we want the flex-items to be centered both horizontally and vertically:

Okay, so we used justify-content for horizontal alignment and align-items for vertical alignment.

Important to understand about Flexbox is that you always work with 1 direction. So the flex-items will always follow 1 particular direction. The default is horizontal (row).

But we can also change the direction to vertical (column):

We used flex-direction: column to change the direction.

The tricky part about this is now that justify-content and align-items flip.

Justify-content is now for the vertical axis and align-items for the horizontal axis.

Centering the flex-items vertically with justify-content now:

And to center them horizontally too, use align-items now:

This was all for aligning ALL flex-items, but what if we just want to position 1 flex-item in a particular way? Let's go back to the default layout in Flexbox:

So in the default layout, we can use 'align-items' for the vertical alignment. That's for ALL flex-items.

Now we want to align 1 flex-item along the vertical axis. We can do that with align-self:

So just select the individual flex-item and use align-self.

That's for the vertical axis. How can we align an individual flex-item along the horizontal axis? Is there a 'justify-self' property as well?

The answer is no. We actually have to use the margin property with value auto:

So here the margin will take up all the space to the left of the selected flex-item, pushing itself to the right.

Note that also for individual alignment their functionalities switch sides when you use flex-direction: column.

To create the gaps between flex-items, you can use the gap properties: column-gap, row-gap and gap. I didn't include it here to keep things simple, so I cheated a bit with the gap in the illustrations.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

This is the default behavior when you first set display: flex on an element:

How do we get all of these flex-items to align at the bottom? Well, just use align-items:

Use align-content if you have multiple rows (flex-items wrapping onto new rows):

What if we just want 1 flex-item to be aligned at the bottom? Well, just select that flex-item and use align-self:

Note that the value end is new. It used to be called flex-end. Flex-end still has better support, but since Flexbox and CSS Grid are being harmonized (their values are becoming the same to simplify things) the future will be end in both Flexbox and CSS Grid, so without the 'flex-' or 'grid-' prefix.

Now, let's say we want a different direction for our flex-items, so we use flex-direction: column. We get this as default behavior:

When you use flex-direction: column, the functionalities of align-items and justify-content flip.

So we used align-items for the vertical axis, but now align-items will regulate the alignment along the horizontal axis.

We now need to use justify-content for alignment along the vertical axis (justify-content is for horizontal alignment in the default situation):

Now let's say we want to align only 1 flex-item to the bottom. We can use the 'margin: auto' feature:

Margin will then simply take up the space between the selected element and the other elements, pushing the selected element to the bottom.

This 'margin: auto' feature is also why Flexbox doesn't have a justify-self: end feature: margin-auto already takes care of that, although it would have been nice to have justify-self as well -- simply for consistency.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

With Flexbox in the default situation (after setting display: flex), you will get this layout if you have set a height on the flex-items:

However, if you don't set a height here, the default behavior in Flexbox is actually that the flex-items will stretch vertically:

When you use flex-direction: column, it switches. Now, the flex-items will stretch horizontally if you don't set a width:

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

FacebookTwitterInstagram

The default layout in Flexbox is this:

The flex-items will sit along the same row, starting from the top-left corner.

Now, we can use align-items to determine where they should sit along the vertical axis.

This is with align-items: center:

With align-items: end:

Note that align-items: flex-end still has better support. CSS Grid and Flexbox are being harmonized, meaning the values will be the same across both Flexbox and CSS Grid, so the 'flex-' prefix is getting dropped, but it will take some time before browser support for 'end' is as good as 'flex-end'.

Note that if you have multiple rows (after flex-items wrapping), you should use align-content instead of align-items.

Let's say we want all flex-items to be centered vertically, but 1 flex-item should sit at the bottom. We can use align-self to determine the individual vertical alignment of a flex-item:

Or use align-self: start to make it sit at the top:

If you change the flex-direction to column, things change. Now, the align-items and align-self properties will align the flex-items along the horizontal axis, instead of the vertical axis.

Now, the justify-content property will align flex-items along the vertical axis:

If we want a particular flex-item to deviate from this, we can use margin: auto:

Now margin will take up the space between the third element and other elements, pushing itself to the bottom and the other ones to the top.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

FacebookTwitterInstagram

The illustration is pretty self-explanatory:

Note that you do need to set a fixed height on the parent element (e.g. height: 1150px). Otherwise the flex-items won't wrap -- they will just stretch out the flex-container more and more.

The example uses align-content instead of align-items because we have multiple columns after wrapping the flex-items. Use align-items when you have just 1 column (no wrapping).

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

Flexbox works very nicely as a layout system for responsive layouts.

Flex-items will automatically wrap onto new a new line if the amount of space becomes less (do set flex-wrap: wrap):

You don't even need media queries for simple layouts like this.

But quite often you do. In my experience, you're not gonna be able to completely get rid of media queries.

In fact, it's probably better to not overcomplicate things and simply code the layout with Flexbox in the way that is easy for you, then simply use media queries to adjust the layout.

If you use the flex property you can make the flex-items take up all the available space:

The flex-basis property acts as a minimum width here. So, first the flex-items take up 300px of width. Then, there may be some space left on the row, the so-called 'available space'. The flex property determines what proportion of the available space the flex-item should take up. Since they all have the same proportion ('1'), they all take up the same available space.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

Important to understand is that you don't create columns with Flexbox and then put elements in those columns, that's what you do with CSS Grid.

With Flexbox you pick a direction for the flex-items. The default is horizontal (row):

If you have more flex items you will get something like this if you allow them to wrap:

So if an additional flex-item doesn't fit on the row, it will wrap onto a new row and start from there again.

Now let's say that we want to create a 3-column layout here. We can do this:

So to create a 3-column layout we simply have to make the flex-items a certain width, so that each row can contain 3 elements, and the fourth one will be kicked onto a new row.

Here, the flex-basis property acts as a minimum width. So the flex items should be at least 500px wide. After the flex-items have taken up 500px of width, there can still be some available space left on the row.

The flex property determines what proportion of this available space each element should take up. Since they all have the same proportion of '1' (since they all have the same class of 'child'), they will take up an equal amount of available space. That could be any number by the way (1 or 43 or 354325). Since they all have the same minimum width + they take up the same amount of available space, they will be the same size.

Note that on the last row there is more available space left, because there are only 2 elements left. But those 2 are the same size.

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

Facebook Twitter Instagram

The crucial thing to understand about Flexbox is that you always work with 1 direction: either the horizontal (row) or vertical (column) direction.

The default is the horizontal (row) direction. In CSS, that means the flex-direction property has a default value of row.

So what you will get as a default is this:

Flex items will be laid out along a row (horizontally), next to each other. Note that you don't have to set the flex-direction property to row yourself to achieve this, it's already done for you (default value).

If you don't want a row layout but a column layout, you can change the flex-direction property to column:

By the way, I think CSS is the 'bottleneck' to most websites & web apps. I believe it's the highest-ROI skill you can master.

Before I mastered CSS, I lost a ton of time & energy fiddling around with CSS.

I was learning about advanced JavaScript topics when I couldn't even implement basic layouts in CSS...

So I created a CSS course to help you avoid the same mistake. Check it out here if you're interested.

Would you like to be notified when I release a new course? You'll get early bird discounts. Sign up for my newsletter here.

Also, I show projects of upcoming courses on social media, follow me here:

FacebookTwitterInstagram