From the course: CSS Layouts: From Float to Flexbox and Grid
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Flexible sizing - CSS Tutorial
From the course: CSS Layouts: From Float to Flexbox and Grid
Flexible sizing
- [Narrator] When a flex container is initiated, flex items resize themselves automatically. But sometimes you may need to set a specific size to the flex items. The defining aspect of the flex layout is the ability to make flex items flex, altering their width or height to fill the available space in the main dimension. There are three properties used together to set the sizing of the flex items. Flex-basis sets the initial size. Flex-grow determines how items will expand if there's extra space in the container. And flex-shrink determines how items will shrink if there isn't enough space in the container. The W3C recommends using the short-hand property, flex, to avoid resetting any values that have not been specifically defined. To use the shorthand property, declare the flex-grow value first. Then the flex-shrink value, ending with the flex-basis value. The flex-grow and flex-shrink properties are defined with the…
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.