FexBox Example - flex-flow: row wrap - flex: 1 1 100%

[r9young]

When using the flex shorthand, the interpretation of the values depends on how many are provided:

1. Two Values:

   • If only two values are specified, the flex shorthand will treat them as:
     • flex-grow (first value): Specifies how much the item will grow relative to others.
     • flex-basis (second value): Sets the initial size of the item.
   • The flex-shrink value defaults to 1 in this case.

   Example: flex: 1 100%

   • 1 is flex-grow.
   • 100% is flex-basis.
   • flex-shrink defaults to 1.

2. Three Values:

   • When all three values are provided, they are interpreted as:
     • flex-grow (first value): Specifies how much the item will grow.
     • flex-shrink (second value): Specifies how much the item will shrink.
     • flex-basis (third value): Sets the initial size of the item.

   Example: flex: 1 2 100px

   • 1 is flex-grow.
   • 2 is flex-shrink.
   • 100px is flex-basis.

This shorthand approach helps to simplify the configuration of flex items in one concise declaration.