# How CSS flex-grow, flex-shrink, and flex-basis Work

DevFeed: [How CSS flex-grow, flex-shrink, and flex-basis Work](<https://devfeed.tech/articles/digging-into-the-flex-property-45285.md>)

Original publisher: [Read original article](<https://ishadeed.com/article/css-flex-property/>)

Author: Ahmad Shadeed

Published: 2020-08-05T00:00:00Z

Content type: tutorial

Language: en

Sources: [Ahmad Shadeed](<https://devfeed.tech/sources/ahmad-shadeed.md>)

Topics: [CSS](<https://devfeed.tech/topics/css.md>), [modern web development](<https://devfeed.tech/topics/modern-web-development.md>), [Web Development](<https://devfeed.tech/topics/web-development.md>)

Tags: [css](<https://devfeed.tech/tags/css.md>), [css-flexbox](<https://devfeed.tech/tags/css-flexbox.md>), [flex](<https://devfeed.tech/tags/flex.md>), [flex-basis](<https://devfeed.tech/tags/flex-basis.md>), [flex-grow](<https://devfeed.tech/tags/flex-grow.md>), [property](<https://devfeed.tech/tags/property.md>)

## AI overview

A practical explanation of the CSS flex shorthand and its flex-grow, flex-shrink, and flex-basis components, including how flex-grow distributes available space among flex items.

## Source excerpt

How CSS flex-grow, flex-shrink, and flex-basis works.