From the course: CSS Essential Training
Join today to access over 25,600 courses taught by industry experts.
Flexbox sizing exercise
From the course: CSS Essential Training
Flexbox sizing exercise
- [Instructor] Now that we've covered the syntax for different Flexbox sizing properties, let's look at how to apply them in this CodePen example. We'll start by adding display flex to define the flex container. All the flex items are now aligned in a row and become the same width as their content. There's also extra space in the container. Using the flex-item selector, add in the flex property to adjust the sizing of the flex items. The first value sets the flex-grow behavior. The default value of zero means it will not expand to fill the extra space. If we change the value to one, the extra space will be distributed equally among the flex items. When applying the same flex-grow value to all the flex items, using a value of two, three, or any number that isn't one won't make a difference since it's based on a ratio. But you can set different flex-grow values to individual flex items. I'll add the item one class…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.