How to Make Flexbox Items the Same Width - Beginner CSS Flex Tutorial

In this tutorial, we look at how to make Flexbox items the same width.

By default—when working in the "row" flex direction—the width of child flex items matches the content they contain.

There are various ways to create equal width flex items but the easiest—and most recommended—method is to use the "flex" shorthand property to give each of your child flex items a "flex" value of "1" (flex: 1;).

This sets the "flex-grow" value to "1" (so that all flex items increase in size by equal amounts) and sets the "flex-basis" value to "0" (so that all items begin at the same size, and end up at the same size).

We'll briefly explore how the "flex-basis" and "flex-grow" properties work, as it's important to understand this when creating equal width flex items in CSS Flexbox.

I hope you found this video helpful. If you have any questions, please leave them in the comments below and I'll do my best to answer as soon as possible.

TIMESTAMPS:
00:00 Introduction
00:23 Default CSS Flexbox widths
00:40 Equal width items using absolute values
01:21 Equal width items using percentages and "calc()"
02:42 Equal width items using "width: 100%"
03:18 Equal width items using "flex-grow" and "flex-basis"
05:37 Equal width items using "flex: 1"—recommended method
07:12 Summary

WATCH NEXT:
• CSS Flex Basis (flex-basis) Explained -    • CSS Flex Basis (flex-basis) Explained - Be...  
• CSS Flex Grow (flex-grow) Explained -    • CSS Flex Grow (flex-grow) Explained - Begi...  
• How to Make One Flex Item Full-Width -    • How to Make One Flex Item Full-Width - CSS...  
• How to Overlap Flex Items -    • How to Overlap Flex Items with CSS Flexbox...