A Comprehensive Guide to Flexbox Sizing

A Comprehensive Guide to Flexbox Sizing

Channel:
Envato Tuts+
Subscribers:
1,630,000
Published on ● Video Link: https://www.youtube.com/watch?v=rkXhKgKQ8Vs


Category:
Guide
Duration: 16:44
12,531 views
217

Flexbox sizing makes it possible to create flexible layouts that fully adapt to the screen. Learn everything you need to know about flexbox sizing in this video. ► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_rkXhKgKQ8Vs&utm_medium=referral&utm_source=youtube.com&utm_content=description

If you set up everything correctly using flexbox, you won’t have to rely on media queries to support different viewports, layouts, and orientations.

In this guide, Adi Purdila will show you how to use the following flexbox sizing properties:

• flex-grow
• flex-shrink
• flex-basis
• flex

Next, watch this video to learn about flexbox alignment: https://www.youtube.com/watch?v=t_I4HWMEtyw

And this one for flexbox ordering: https://www.youtube.com/watch?v=_LlCJrqAoEU

Read the written version of this flexbox sizing guide on Envato Tuts+: https://webdesign.tutsplus.com/tutorials/a-comprehensive-guide-to-flexbox-sizing--cms-31948?utm_campaign=yt_tutsplus_rkXhKgKQ8Vs&utm_medium=referral&utm_source=youtube.com&utm_content=description

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Envato Tuts+
Discover free how-to tutorials and online courses. Design a logo, create a website, build an app, or learn a new skill: https://tutsplus.com/?utm_campaign=yt_tutsplus_rkXhKgKQ8Vs&utm_medium=referral&utm_source=youtube.com&utm_content=description

Envato Elements
All the creative assets you need under one subscription. Customize your project by adding unique photos, fonts, graphics, and themes.
► Download Unlimited Stock Photos, Fonts & Templates with Envato Elements: https://elements.envato.com/?utm_campaign=yt_tutsplus_rkXhKgKQ8Vs&utm_medium=referral&utm_source=youtube.com&utm_content=description

► Subscribe to Envato Tuts+ on YouTube: https://www.youtube.com/tutsplus
► Follow Envato Tuts+ on Twitter: https://twitter.com/tutsplus
► Follow Envato Tuts+ on Facebook: https://www.facebook.com/tutsplus
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -



Other Videos By Envato Tuts+


2021-06-14How to Make a Great Infographic With Google Slides Templates
2021-06-14Adobe Illustrator Patterns: A Basic Guide
2021-06-13How to Copy a Page in WordPress
2021-06-12How to Make Twitch Alerts (With 10+ Custom Notification Examples!)
2021-06-11Punk Rock Portrait in Procreate | Watch Me Work! #shorts
2021-06-11How to Create a Russian Text Effect in Adobe Illustrator
2021-06-105 Top Lower Thirds Title Templates | Premiere Pro Templates
2021-06-09Magazine Cover Design in InDesign | FREE COURSE
2021-06-08A to Z of Adobe XD: Tips and Tricks!
2021-06-07How to Write in the Sand in Adobe Photoshop
2021-06-06A Comprehensive Guide to Flexbox Sizing
2021-06-05Working With Type on a Path in Illustrator
2021-06-04Summer Portrait in Procreate | Watch Me Work! #shorts
2021-06-04How to Create a Dust Texture From Scratch | Photoshop Tutorial
2021-06-0310 Funny Photo Effects for Photoshop
2021-06-02Edit Battle: Dark Fantasy Photoshop Manipulation
2021-06-01How to Make Blood Effects in Photoshop
2021-05-31How to Make a PowerPoint Funnel Diagram Quickly (With PPT Templates)
2021-05-31How to Create a Glowing Text Effect in Illustrator
2021-05-30A Comprehensive Guide to Flexbox Ordering & Reordering
2021-05-29How to Create Custom Color Palettes in WordPress Gutenberg


Tags:
flex box sizing
flexbox
flex box size
flex size
flex box
flex grow
Envato
Tuts+
Envato Tuts+
flexbox tutorial
css
css flexbox
web development
css flexbox tutorial
flexbox css
css flexbox tutorial for beginners
responsive web design
flex
css flex
flexbox layout
how to use flexbox
css flexbox layout
html