How to Make One Flex Item Full-Width - CSS Flexbox Tutorial

Pubblicato il: 06 novembre 2021
sul canale di: Front End Beginners

19,872

142

In this tutorial, we look at how to make one flex item full-width in CSS Flexbox.

To do this, we need to give the full-width flex item a "flex-basis" value of 100%. This sets its initial starting width to 100% of the width of the parent flex container.

To allow it to expand to its full-width, it needs to be positioned on its own row inside the flex-container.

To do this, we need to apply a "flex-wrap" value of "wrap" on the parent container.

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:10 Setting up our flex container
00:52 Adding our flex items
02:11 How to make one flex item full-width
03:32 Setting "flex-wrap: wrap"
04:50 Justifying our other flex items
05:52 Making other items full-width
06:35 Summary

WATCH NEXT:
• CSS Flex Basis (flex-basis) Explained -    • CSS Flex Basis (flex-basis) Explained...
• How to Vertical Align with CSS Flexbox -    • How to Vertical Align with CSS Flexbo...
• Create a Grid Layout with CSS Flexbox -    • How to Create a Grid Layout with CSS ...

In questa pagina del sito puoi guardare il video online How to Make One Flex Item Full-Width - CSS Flexbox Tutorial della durata di ore minuti seconda in buona qualità , che l'utente ha caricato Front End Beginners 06 novembre 2021, condividi il link con amici e conoscenti, su youtube questo video è già stato visto 19,872 volte e gli è piaciuto 142 spettatori. Buona visione!

47,152