CSS Flex - Flex Property (Length definition)

About

The flex-property is a shorthand property that specifies the components of a flex length:

• flex-grow (Default to 1) factor that determines how much the item will grow relative to the rest.
• flex-shrink (Default to 1) factor that determines how much the item will shrink relative to the rest
• flex-basis. The initial main size of the item, before free space is distributed according to the factors. Possible values:
  • auto. Generally same as content.
  • content. The sizing is based on the content.
  • other evaluated as the width and height properties

Basic Shorthand Values

Initial

Initial Makes the flex item inflexible when there is positive free space, but allows it to shrink to its minimum size when there is insufficient space.

/* Default (initial or 0 1 auto)*/
flex: initial; 
flex: 0 1 auto;

None

none makes the flex item fully inflexible.

/* None = 0 0 auto. */
flex: none;
flex: 0 0 auto;

Auto

Auto: The flex box will absorb any free space

/* Auto = 1 1 auto. */
flex: auto;
flex: 1 1 auto;

Positive Number

• <positive-number> The box receives the specified proportion of the free space in the flex container.

/* positive-number = <positive-number> 1 0 */
flex: <positive-number>;
flex: <positive-number> 1 0 ;

Other

Absolute

Absolute flex starting from a flex basis of zero. Notice that the item with a flex factor of 2 grows twice as fast as the others.

<div id='main'>
   <article>Short</article>
   <nav>loooooonggg</nav>
   <aside>short</aside>
</div>

#main { display: flex;  text-align:center; padding: 1rem; width: 70%; box-sizing: border-box;}
#main > article { background-color: DeepSkyBlue; padding: inherit; flex:1 1 0; }
#main > nav     { background-color: AliceBlue; padding: inherit; flex:1 1 0;}
#main > aside   { background-color: CadetBlue; padding:inherit; flex:2 1 0;}

Relative

Relative flex starting from a flex basis of the item’s content size (auto). Notice that the item with a flex factor of 2 grows twice as fast as the others.

<div id='main'>
   <article>Short</article>
   <nav>loooooonggg</nav>
   <aside>short</aside>
</div>

#main { display: flex;  text-align:center; padding: 1rem; width: 70%; box-sizing: border-box;}
#main > article { background-color: DeepSkyBlue; padding: inherit; flex:1 1 auto; }
#main > nav     { background-color: AliceBlue; padding: inherit; flex:1 1 auto;}
#main > aside   { background-color: CadetBlue; padding:inherit; flex:2 1 auto;}

Documentation / Reference

• flex property