Flex

What is the primary purpose of flex?

To preserve how space among children is shared along a primary axis by container size responsiveness. Basically widths and ratios.

Describe what flex containers shrink to?

1. Flex shrinks down to either min-content implicit width (max line-wrap, as in the longest word) or explicit min-width/height.

What is the primary purpose of flex?

To preserve how space among children is shared along a primary axis by container size responsiveness. Basically widths and ratios.

Describe what flex containers shrink to?

Flex shrinks down to either min-content implicit width (max line-wrap, as in the longest word) or explicit min-width/height.

What is a flex item's default minimum size, and what property controls it?

By default every flex item has min-width: auto (or min-height: auto in a column). It resolves to the item's content-based automatic minimum (its min-content size) — NOT zero. This is the "floor" flex-shrink won't squeeze past.

How does min-width: auto differ between normal flow and a flex item?

In normal flow, min-width: auto resolves to 0 (a block can shrink to nothing and overflow). In a flex container, min-width: auto resolves to the content-based minimum (min-content). That flex-specific rule is WHY flex items won't shrink below their contents.

What is min-content? (general definition)

The smallest width a box can take while its own contents still fit without overflowing — i.e. wrapping at every allowed break point. Every box has one; it's an intrinsic size, not just a text thing.

What is min-content for TEXT specifically?

The longest single unbreakable run — usually the longest word — because text breaks at spaces. This is a special case of the general min-content rule.

What is max-content?

The width content takes if it NEVER wraps — the whole string laid out on one line. It's the widest a box wants to be (vs min-content = narrowest it can be).

How do you let a flex item shrink BELOW its min-content floor?

Set min-width: 0 (or min-height: 0). This removes the automatic content-based floor so the item can shrink further and let content overflow. Needed for things like text-overflow: ellipsis inside flex.

What is a flex item's "automatic minimum" precisely?

The SMALLER of the content min-content size and any definite size (e.g. an explicit width) you gave the item. So width: 50px with a 100px min-content → floor is 50px, not 100px.

px vs rem vs em — what is each relative to?

px = absolute, always fixed. rem = relative to the ROOT font size (html element, default 16px). em = relative to the CURRENT element's own font size (changes by location, compounds when nested).

When should you use rem?

For anything that should scale with the user's browser font-size setting (accessibility): font sizes almost always, spacing you want to breathe with text (padding/margin/gap), and scalable component sizing.

When should you use px?

For things that should stay fixed regardless of font size: borders (1px hairlines), fine details needing exact control, and elements that genuinely shouldn't grow (e.g. a fixed 24px icon).

When should you use em?

For spacing that should track THIS component's font size — e.g. button/badge padding in em scales automatically when you make a larger-text variant. Also line-height, letter-spacing, icons sized to sit next to text.

What is the em compounding trap?

Because em is relative to the element's own font size, nested em font sizes multiply: 1.2em inside 1.2em inside 1.2em = 1.728x. rem avoids this by always referring to the root — which is why rem became the default for font sizing.

Which direction do width and height resolve relative to content?

Width = outside-in: the box takes width from its parent, then content wraps to fit. Height = inside-out: height is however tall content ends up. That's why width: auto fills the container but height: auto hugs content.

Why does height: 50% often do nothing while width: 50% works?

A percentage height needs the parent to have a DEFINITE height. Parents are usually height: auto (waiting on their own content), so the percentage can't resolve and is ignored. Percentage width works because the parent's width is known from above.

What does "blockify" mean when an element becomes a flex item?

Flex forces each direct child's OUTER display type to block. Inline / inline-block children lose their inline-ness and participate as block-level boxes in the flex line.

What specifically changes when a child is blockified into a flex item?

You can now set width/height (respected). vertical-align stops applying (use align-items/align-self instead). float stops applying. Margins between adjacent flex items don't collapse.

Does blockify change the INSIDE of a flex item?

No. It only changes the OUTER type (how the item presents to the flex line). The item's contents still lay out normally — a

inside still flows its text, a grid item still grids its children.

Does flex-basis override width or min-width?

flex-basis overrides WIDTH (the preferred main size) when it's anything other than auto. It does NOT override min-width — the min-width floor still clamps at the end.

What is the full flex sizing chain?

1) flex-basis sets the starting main size (overriding width). 2) grow/shrink adjust it. 3) min-width / max-width clamp the result — with min-width having the FINAL say. flex-basis beats width but NOT min-width. (This is why min-width: 0 is needed to shrink further.)

For a NON-text container, what determines its min-content?

It's built recursively from its children's min-content sizes. Depends on how they stack: STACKED (block flow) → the WIDEST child's min-content. IN A ROW (flex row / inline / table row) → the SUM of children's min-contents.

What is the min-content rule for normal block flow?

Block boxes stack vertically and don't compete for width, so the container's min-content width = the WIDEST child's min-content. ("Largest child sets the floor.")

When is min-content a SUM instead of a max?

When boxes sit side by side in a row: inline content on one line, a flex row, or table cells across a row. Their widths add up, so the container's min-content = the SUM of the children's min-contents.

How do the max-rule and sum-rule interact down the tree?

They interleave: take the SUM where things are in a row, take the MAX where they stack. A flex ROW container sums its items' min-contents, but each item (block-flow internally) uses max-of-children for its own min-content. Recursion bottoms out at intrinsic sizes: text (longest word) or replaced elements like images (natural width).

What is the primary purpose of flex?

To preserve how space among children is shared along a primary axis by container size responsiveness. Basically widths and ratios.

Describe what flex containers shrink to?

Flex shrinks down to either min-content implicit width (max line-wrap, as in the longest word) or explicit min-width/height.

What is a flex item's default minimum size, and what property controls it?

By default every flex item has min-width: auto (or min-height: auto in a column). It resolves to the item's content-based automatic minimum (its min-content size) — NOT zero. This is the "floor" flex-shrink won't squeeze past.

How does min-width: auto differ between normal flow and a flex item?

In normal flow, min-width: auto resolves to 0 (a block can shrink to nothing and overflow). In a flex container, min-width: auto resolves to the content-based minimum (min-content). That flex-specific rule is WHY flex items won't shrink below their contents.

What is min-content? (general definition)

The smallest width a box can take while its own contents still fit without overflowing — i.e. wrapping at every allowed break point. Every box has one; it's an intrinsic size, not just a text thing.

What is min-content for TEXT specifically?

The longest single unbreakable run — usually the longest word — because text breaks at spaces. This is a special case of the general min-content rule.

What is max-content?

The width content takes if it NEVER wraps — the whole string laid out on one line. It's the widest a box wants to be (vs min-content = narrowest it can be).

How do you let a flex item shrink BELOW its min-content floor?

Set min-width: 0 (or min-height: 0). This removes the automatic content-based floor so the item can shrink further and let content overflow. Needed for things like text-overflow: ellipsis inside flex.

What is a flex item's "automatic minimum" precisely?

The SMALLER of the content min-content size and any definite size (e.g. an explicit width) you gave the item. So width: 50px with a 100px min-content → floor is 50px, not 100px.

px vs rem vs em — what is each relative to?

px = absolute, always fixed. rem = relative to the ROOT font size (html element, default 16px). em = relative to the CURRENT element's own font size (changes by location, compounds when nested).

When should you use rem?

For anything that should scale with the user's browser font-size setting (accessibility): font sizes almost always, spacing you want to breathe with text (padding/margin/gap), and scalable component sizing.

When should you use px?

For things that should stay fixed regardless of font size: borders (1px hairlines), fine details needing exact control, and elements that genuinely shouldn't grow (e.g. a fixed 24px icon).

When should you use em?

For spacing that should track THIS component's font size — e.g. button/badge padding in em scales automatically when you make a larger-text variant. Also line-height, letter-spacing, icons sized to sit next to text.

What is the em compounding trap?

Because em is relative to the element's own font size, nested em font sizes multiply: 1.2em inside 1.2em inside 1.2em = 1.728x. rem avoids this by always referring to the root — which is why rem became the default for font sizing.

Which direction do width and height resolve relative to content?

Width = outside-in: the box takes width from its parent, then content wraps to fit. Height = inside-out: height is however tall content ends up. That's why width: auto fills the container but height: auto hugs content.

Why does height: 50% often do nothing while width: 50% works?

A percentage height needs the parent to have a DEFINITE height. Parents are usually height: auto (waiting on their own content), so the percentage can't resolve and is ignored. Percentage width works because the parent's width is known from above.

What does "blockify" mean when an element becomes a flex item?

Flex forces each direct child's OUTER display type to block. Inline / inline-block children lose their inline-ness and participate as block-level boxes in the flex line.

What specifically changes when a child is blockified into a flex item?

You can now set width/height (respected). vertical-align stops applying (use align-items/align-self instead). float stops applying. Margins between adjacent flex items don't collapse.

Does blockify change the INSIDE of a flex item?

No. It only changes the OUTER type (how the item presents to the flex line). The item's contents still lay out normally — a inside still flows its text, a grid item still grids its children.

Does flex-basis override width or min-width?

flex-basis overrides WIDTH (the preferred main size) when it's anything other than auto. It does NOT override min-width — the min-width floor still clamps at the end.

What is the full flex sizing chain?

1) flex-basis sets the starting main size (overriding width). 2) grow/shrink adjust it. 3) min-width / max-width clamp the result — with min-width having the FINAL say. flex-basis beats width but NOT min-width. (This is why min-width: 0 is needed to shrink further.)

For a NON-text container, what determines its min-content?

It's built recursively from its children's min-content sizes. Depends on how they stack: STACKED (block flow) → the WIDEST child's min-content. IN A ROW (flex row / inline / table row) → the SUM of children's min-contents.

What is the min-content rule for normal block flow?

Block boxes stack vertically and don't compete for width, so the container's min-content width = the WIDEST child's min-content. ("Largest child sets the floor.")

When is min-content a SUM instead of a max?

When boxes sit side by side in a row: inline content on one line, a flex row, or table cells across a row. Their widths add up, so the container's min-content = the SUM of the children's min-contents.

How do the max-rule and sum-rule interact down the tree?

They interleave: take the SUM where things are in a row, take the MAX where they stack. A flex ROW container sums its items' min-contents, but each item (block-flow internally) uses max-of-children for its own min-content. Recursion bottoms out at intrinsic sizes: text (longest word) or replaced elements like images (natural width).

What does flex-basis do?

Sets the hypothetical size of each flex child.