From the course: CSS Essential Training

Unlock the full course today

Join today to access over 23,200 courses taught by industry experts.

Flexbox exercise

Flexbox exercise - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Flexbox exercise

“

- [Instructor] We've just covered some general usage and syntax for various Flexbox sizing properties. Now let's take a closer look at how to use them in a CodePen example. Let's start by adding display flex to define the flex container. All the child elements have become flex items and align in a row. They also become the same width as their content. We can also see that there is extra space in the container. Now let's look at how we can change the sizing by adding the flex property. The first value, flex grow, defaults to zero. That means it will not expand to fill any extra space. If we change the value to one. All the flex items will now expand by the same amount to fill up the space. Since we're applying the same flex grow value to all of flex items, using a value of two or three or any number other than one won't make much of a difference. But if I wanted one of the items to have twice the amount of extra space…

Contents