0Pricing
CSS Academy · Lesson

Flex Grow Shrink and Basis

Control how flex items grow, shrink, and set their base size using the flex shorthand.

The flex Shorthand

The flex shorthand on flex items sets three values: flex-grow, flex-shrink, flex-basis.

.item {
  flex: 1 1 auto;
  /* grow:1 shrink:1 basis:auto */
}

flex-basis

flex-basis sets the initial size of a flex item before growing or shrinking. It overrides width (in row direction). auto uses the item's width or content size.

.sidebar { flex-basis: 250px; }
.main    { flex-basis: auto; }

All lessons in this course

  1. Display Flex and Flex Direction
  2. Justify-Content and Align-Items
  3. Flex Wrap and Align-Content
  4. Flex Grow Shrink and Basis
← Back to CSS Academy