Learn CSS / Flexbox & CSS Grid

Flexbox: basis, grow and shrink

Access full course

Ready-to-use code

Flex-grow

See the Pen Flexbox / Flex-grow / Flexbox & CSS Grid workshop by In a Rocket (@inarocket)on CodePen.

Flex-shrink

See the Pen Flexbox / Flex-shrink / Flexbox & CSS Grid workshop by In a Rocket (@inarocket)on CodePen.

What you have learned

  • Learn how flex basis specifies the initial main size of the flex item.
  • How flex grow determines how much the flex item will grow relative to the rest of the flex items.
  • How flex shrink sets how much the flex item will shrink.

References

Newsletter

  • Free Stuff. Exclusive access to new courses, latest news and free resources.
  • No spam. Just real content that's meant to make a difference.