The flex-grow, flex-shrink and flex-basis Properties in CSS
January 29, 2021

The flex-grow Property

In simple terms, we use flex-grow property to specify how much flex-container child elements will grow relative to other child elements.

We define it in integer value and the default is 0. You can not add negative values.

If all elements have the same flex-grow, then all items will get the same share space.


The flex-shrink Property

This property is the opposite version of flex-grow.

flex-shrink property specifies how much flex-container child elements will shrink relative to other child elements.

Same as flex-grow, we define it in integer value and the default is 0. You can not add negative values.


The flex-basis Property

Using the flex-basis property, we can define the initial size of flex item. It will shrink and grow is there is a room available but initially the element will take the defined size.


How to use flex-grow, flex-shrink, and flex-basis properties together?

We can use flex property. It’s a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.


The following example will make the first element 200px initial size. Twice 0 won’t allow it to grow or shrink. Pretty handy if we have to keep an element in fixed size but need a freedom to adjust the elements nearby.


Leave a Reply

Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 How to set opacity or transparency using CSS? #3 Pagination in CSS with multiple examples #4 How to make HTML form interactive and using CSS? #5 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #6 How to uninstall Cocoapods from the Mac OS?

Recently Posted

Mar 2 How to zoom an element on hover using CSS? Mar 2 the box-sizing property in CSS Mar 2 WordPress: How to access first and random row values from a repeater field in ACF? Mar 1 The basics of CSS Box model Feb 27 WordPress: How to display slider repeater fields in ACF? Feb 26 Simple Page Hit Counter in PHP

You might also like these

How to create a simple tab interaction using CSS?CSSAlternate Style Sheets in CSSCSSSolution for the error Commit failed – exit code 1 received in Desktop GithubMiscMicroservices vs Monolithic ArchitectureMiscDebugging in WordPress Part 3: SCRIPT_DEBUG and SAVEQUERIESWordPressKilling A Project Part 2: Who should make the decision to kill a project?Misc