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

Publié le: 23 novembre 2021
sur la chaîne: Front End Beginners

18,433

244

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...
• CSS Flex Grow (flex-grow) Explained -    • CSS Flex Grow (flex-grow) Explained -...
• How to Make One Flex Item Full-Width -    • How to Make One Flex Item Full-Width ...
• How to Overlap Flex Items -    • How to Overlap Flex Items with CSS Fl...

Sur cette page du site, vous pouvez voir la vidéo en ligne How to Make Flexbox Items the Same Width - Beginner CSS Flex Tutorial durée heure minute seconde en bonne qualité , qui a été Téléchargé par l'utilisateur Front End Beginners 23 novembre 2021, Partagez le lien avec vos amis et connaissances, sur youtube cette vidéo a déjà été regardée 18,433 fois et il a aimé 244 téléspectateurs. Bon visionnage!

1,925