Flexbox

Usage

See the Pen Flexbox Basics 1 by 4joma7 (@4joma7) on CodePen.

See the Pen Flexbox Basics 2 by 4joma7 (@4joma7) on CodePen.

See the Pen Flexbox Basics 3 by 4joma7 (@4joma7) on CodePen.

align-self

An align-self: auto inherits it’s parent’s align items value. Or stretch if the flex item has no parent value.

When Parts Are Missing

https://stackoverflow.com/a/45439795 Specifying only flex-basis: 20% leaves flex-grow and flex-shrink at their initial values of 0 and 1 respectively, making that longhand declaration by itself equivalent to the shorthand flex: 0 1 20%.

flex-basis: 20% is equivalent to flex: 0 1 20%. So the Flex Shorthand Combo's flex: default expansion of flex: 0 1 auto is overridden.

Flex Flow Shorthand

The flex-flow is a shorthand property which takes flex-direction and flex-wrap values.

Examples are

flex-flow: row nowrap;
flex-flow: column wrap;

Flex Shorthand Combos

Flex shorthand combos are about the combinations of the flex-grow and flex-shrink and flex-basis properties. They can be combined into a CSS property called flex. This CSS property targets flex items.

flex: g s b.

It can be acronymimized to gsb as the flex attributes are defined in it's full written form in the order of flex-grow, then flex-shrink, then flex-basis.

See the Pen Flexbox Basics 4 by 4joma7 (@4joma7) on CodePen.

The Default; flex: default

The flex: default setting is an alias for flex: 0 1 auto

Hey item, if there is enough space, i do not grow you - i obey your size as you said. But if there is not enough space for the size you set, i shrink you as i see fit.

This setting is the default for all flex items.

In detail this setting, starting with last attribute, means:

• auto defines the value for flex-basis. It affects the initial width of the flex-item; The width of the flex-item will be automatically determined based on the size of it's content.

• 0 defines the value for flex-grow. It affects the initial width of the flex-item; The width of the flex-item can grow as the flex container sees fit.

• 1 defines the value for flex-shrink. It affects the initial width of the flex-item; The width of the flex-item can shrink as the flex container sees fit.

flex: none

The flex: none setting is an alias for flex: 0 0 auto.

Hey item, i do not shrink or grow you - i obey your size as you said. To the CSS awsomeness.

flex: auto

The flex: auto setting is an alias for flex: 1 1 auto or flex: 1 1 0.

For the flex-basis - it does not matter if auto or 0 - grow and shrink take completely over. That takes care of the no-width problem, that is if no width is set.

Hey item, i do shrink and grow you as i see fit. Whatever you said your size or basis was.

Ratios

You can put any ratio for grow and shrink in whole numbers, and for basis in any CSS unit.

When Parts Are Missing

https://stackoverflow.com/a/45439795 The spec says, in a flex shorthand declaration, when flex-grow and flex-shrink are omitted, they both default to 1. The flex-basis defaults to auto or 0.

And the corresponding AST is

Value: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]

A flex: 1 setting expands to flex: 1 1 0. A flex: 20% setting expands to flex: 1 1 20%.

Building An Absolute Flex

The absolute flex is a flex setting with a missing flex-basis, defaulting to flex-basis: 0.

Absolute flex behavior means that the ratio of flex-grow and flex-shrink take over. They are not depending on any size set on any flex item.

The flex: 1 setting is an absolute flex. It expands to flex: 1 1 0.

Building A Relative Flex

The relative flex is a flex setting with a flex-basis: auto.

Relative flex behaviour means shrinking or growing in the same ratio as the flex-item's initial width( or height, depending on the flex direction).

If the individual widths weren’t equal in the first place( it was based off content), when the flex items grow, the widths also stay unequal.

The flex: auto setting is a relative flex. It expands to flex: 1 1 auto.

Using margin-left/right: auto to space things off

Do NOT use margin: auto. Also mind that justify-content will no longer work.

Glossary