From the course: No-Code CSS Layouts with Webflow
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Advanced Flexbox settings - Webflow Tutorial
From the course: No-Code CSS Layouts with Webflow
Advanced Flexbox settings
- [Instructor] Now, I know you've all been waiting for these columns here and you are just dying to know how to set these columns up so that they are equal widths. So the very first thing to know is if you use the width property that's down here under size, you have just failed your Flexbox. And the reason why is that widths are, even if we said the width here, make sure your flex-child is selected and we said it's 30%. What we are doing here effectively is we have set the widths of our flexible boxes to an inflexible width. It will be 30%, not 29.9%, not 30.1%. It will always be 30%. And that is actually bad when it comes to Flexbox. One of the wonderful things that Flexbox does is it flexes. And so it can work with a little more space or a little less space. So let's turn this off. And so what would the equivalent be here inside of Flexbox? Well, what you're going to want to do is with the flex-child class selected here, you are going to want to go to click on alignment and order…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Introducing Flexbox8m 23s
-
(Locked)
Advanced Flexbox settings6m 55s
-
(Locked)
Introducing Grid8m 27s
-
(Locked)
Grid areas and exceptions to the grid6m 19s
-
(Locked)
What is QuickStack?5m 5s
-
(Locked)
Challenge: Working with QuickStack, Grid, and Flexbox2m 33s
-
(Locked)
Solution: Working with QuickStack, Grid, and Flexbox5m 38s
-
-
-