CSS flex Property

CSS flex property specifies how a flex item will grow or shrink within its flex container. It is a shorthand for the following three flexbox properties:

A shorthand property combines two or more properties into a single property which helps us reducing the code.

In the example below, we have specified flex: 1 1 0;, it means that item2 grows along the main axis to cover the unused space if any, and shrinks 2 times faster than the remaining flex items if enough space is not available. It remains in its original size in the beginning as flex-basis is set to 0. Try it out:

Example:

#item2{
  flex: 1 1 0;
}

Note- flex: 1 1 0; is same as flex: 1;


CSS Syntax

The flex property has the following syntax:

flex: flex-grow flex-shrink flex-basis |none|auto|initial|inherit;

Property Values

The flex property accepts the following values:

flex-growDefines how much a flex item will grow compared to the remaining flex items if enough space is available.
flex-shrinkDefines how faster a flex item will shrink compared to the remaining flex items if enough space is not available.
flex-basisDefines the initial size of a flex item.
noneSame as 0 0 auto.
autoSame as 1 1 auto.
initialSets the flex property to its default value. The default value is 0 1 auto.
inheritInherits the flex property from the parent element.

General Info

Default Value0 1 auto
InheritedNo
JavaScript Usageelement.style.flex= “1 1 0”

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.

Leave a Comment