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

Flexible sizing - CSS Tutorial

From the course: CSS Layouts: From Float to Flexbox and Grid

Start my 1-month free trial

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…

Contents