From the course: CSS Essential Training
Join today to access over 25,600 courses taught by industry experts.
Sizing with flex properties
From the course: CSS Essential Training
Sizing with flex properties
- [Instructor] A key feature of the Flexbox layout is the many sizing options. The flex property defines how flex items will grow or shrink to fit within the flex container. It's also shorthand for flex grow, flex shrink, and flex basis. Let's go over how each property is used for sizing. Flex Grow determines how flex items expand when there's extra space available in the container. The value is defined with a single positive number. The default value is zero, which means flex items will not expand even if there is extra space. A value of one is commonly used to expand all flex items equally to fill the container, but this doesn't mean all flex items will be the same size. When flex grow is set to zero, the size of the flex items remain at its default size, which is the size of its content. When flex grow is set to one, the extra space is divided evenly among the flex items and added to the current size of each one.…
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.
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.