From the course: CSS Essential Training

Unlock the full course today

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

Sizing with flex properties

Sizing with flex properties - CSS Tutorial

From the course: CSS Essential Training

Start my 1-month free trial Buy for my team

Sizing with flex properties

“

- [Instructor] The main feature of the Flexbox layout is its ability to have the flex items expand or shrink to fit its container. This is defined by the flex property, which is shorthand for flex-grow, flex-shrink and flex-basis. Let's review the syntax and usage. Flex-grow determines how items expand in the flex container. It's defined with a unitless number value. The default is zero, meaning items won't expand and any extra space won't be filled. But a value of one will expand all the flex items equally to fill the container. But the flex-grow value of one doesn't make all the flex items the same size. If some flex items have more content than others they will still be displayed with different sizes. However, the extra space is divided evenly among the flex items and added to the current size of each item. The flex shrink property controls how flex items will shrink if they're larger than the container. It also uses…

Contents