课程: CSS Essential Training

今天就学习课程吧！

今天就开通帐号，24,700 门业界名师课程任您挑！

Flexbox exercise

Flexbox exercise - CSS教程

课程: CSS Essential Training

开始一个月试用 购买团队方案

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…

内容