University of New Hampshire, Department of Computer Science

Information Technology 502
, Intermediate Web Design

Spring 2024

Jump to navigation

Design Template by Anonymous

Flex Grow, Shrink, & Basis

flex-grow

The flex grow element takes a unitless value to increase the size of a selected object within a container faster than the other objects.

This property is set to flex grow of 0 or the default property value flex-grow: 0;
Flex grow property set to 1 gives us an object that expands to fill the space leftover in the container.flex-grow: 1;

flex-shrink

The flex shrink element takes a unitless value which serves as a rate of how quickly the selected element would shrink in comparison to the other elements within the container. Keep in mind you cannot use flex-wrap and flex-shrink within the same object.

This property is set to flex grow of 0 or the default property value flex-shrink: 0;
Flex shrink property set to a unitless value gives us an object that shrinks when there is not enough space in the parent container to fit all of the child objects within. This examples is using flex-shrink: 10;

flex-basis

Flex basis can only be used in conjunction with either flex grow or shrink. Basis allows you to set a default size using any size value for either the Flex grow or flex shrink element. An example of this would look like. flex-basis: 150px;