What exactly does `flex-basis` do?

It sets the *ideal* starting size of an element before the browser calculates any growing or shrinking. It is essentially the `width` (or `height`, depending on direction), but it is more flexible because it yields to the flex algorithm.

Why should I use the `flex` shorthand?

It's highly recommended by CSS specifications. The shorthand intelligently sets default values for `grow` and `shrink` when they are omitted, preventing common layout bugs that occur when you only set `flex-basis`.

Does `align-self` work on the Main Axis?

No. `align-self` ONLY works on the Cross Axis (overriding `align-items`). To override alignment on the Main Axis, you must use `margin: auto;` tricks, as there is no `justify-self` in Flexbox (only in CSS Grid).

CSS MASTER CLASS /// VISUAL ENGINEERING /// LAYOUT DESIGN /// ANIMATION LAB /// CSS MASTER CLASS /// VISUAL ENGINEERING ///

⚡ Total XP: 0|💻 css XP: 0

Flex Items in CSS3: Styling & Design

Learn about Flex Items in this comprehensive CSS3 web design tutorial. Learn how to control individual children within a flex container.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Flex Item Engineering

Child-specific control protocols. Master the mathematical ratios that dictate how individual flex items absorb available space or shrink to prevent overflow.