https://www.youtube.com/watch?v=ZRtzk0371tk

Content width values

min-content -> basically the width of the largest word or word boundaries but depends on the language used fit-content(300px) -> this is smallest of the max-content or the value specified.

These values as of now cannot be used for width values in current browsers, but you can use them in Flex or Grid contents.

FlexBox inspectors

Best is to use the keywords for flex to reset all three values (grow, shrink, flex-basis)

Values: initial, none, auto, <positive integer>

In the Devtools inspector you can filter for "flex" and see what the browser uses for default values (enable Browser styles checkbox)

flex-basis property

flex-basis is only starting point for the width calculation.

The initial value is 0 1 auto. So the items will not grow beyond their content's width, but will shrink until min-content width.

The auto flex-basis is equivalent of the max-content of the contents of the item and will be used as the starting point for the final width calculation.

flex-basis: 0 versus flex-basis: auto

The difference will be how the available free space is distributed between the elements that have flex-grow larger than 0.

So when the flex-basis: auto used, items take up max-content width and only then the available free space is distributed.

When flex-basis: 0 is used, the available free space is much more, as the items only take up min-content width. This will result in that an item with flex-grow: 2 taking up about twice as much space a items with flex-grow: 1.

Aligning items

Box alignment properties are meant (written in the specs) to be used across all block content elements, currently they can be used in Flexbox and Grid elements. The syntax and logic is the same for both layout types.

Justify

In flexbox only 4 of the 6 alignment properties can be used. justify-items and justify-self do not apply. They are meant to justify a box in its formatting context.

justify-content

it does work in FlexBox and is meant to justify items along the main axes. The categories of keywords (end, start, center and the second is about spacing, space-)

The sizes (heights)

By the default the items have the same height unless you do something like align-items: end.

Baseline

Great if you want to align actual texts across items. It puts all the texts on the same line across the flex items.

align-content

Great when you do height: [largenumber] to your flex container, then if you add align-conten: start it "packs" the flex lines, so each flex line takes up the height of its largest flex item. The default value seems to be something like space between.

Centering and aligning with margin

Centering

You can just use margin: auto on the flex items and they will be centered horizontally and vertically!

It there are several items, they will be distributed (but still centered).

Aligning to right

If you want to align the last item in a flex line to the right, you can use margin-left: auto and it will jump to the right, as if it was float: right.

Flexible sizing and responsive design

Values to help with flexible sizing (in Grid context):

fr

auto: will grow and shrink "less" than fr. So fr value will grow and shrink more, on large screens they will be bigger, on smaller screens they will be smaller.

fit-content(200px): will not grow more than the minimum it needs.

minmax(200px, 400px): (around 28mins in the video) it shrinks faster than auto, but only until 200px. max-content