new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Tailwind CSS v4 · all subjects

utilities/flex

7 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

flex utilities class syntax and CSS output

The flex utilities in Tailwind CSS v4 use the following syntax patterns and generate corresponding CSS: flex-<number> generates 'flex: <number>;', flex-<fraction> generates 'flex: calc(<fraction> * 100%);', flex-auto generates 'flex: auto;', flex-initial generates 'flex: 0 auto;', flex-none generates 'flex: none;', flex-(<custom-property>) generates 'flex: var(<custom-property>);', and flex-[<value>] generates 'flex: <value>;'.

flex-1 utility for grow and shrink

The flex-1 utility allows a flex item to grow and shrink as needed, ignoring its initial size. It is used to make flex items responsive to available space.

flex-initial utility behavior

The flex-initial utility allows a flex item to shrink but not grow, while taking into account its initial size. This is equivalent to 'flex: 0 auto;'.

flex-auto utility behavior

The flex-auto utility allows a flex item to grow and shrink while taking into account its initial size. This is equivalent to 'flex: auto;'.

flex-none utility prevents flex item growth and shrink

The flex-none utility prevents a flex item from growing or shrinking. It is equivalent to 'flex: none;' and keeps the item at its initial size.

flex utilities support arbitrary values and custom properties

The flex utilities support arbitrary values using square bracket notation (flex-[<value>]) and custom CSS properties using parentheses notation (flex-(<custom-property>)). Arbitrary values directly set the flex property, while custom properties use CSS variables.

flex utilities support responsive design

The flex utilities in Tailwind CSS v4 support responsive design modifiers, allowing different flex behaviors at different breakpoints.

Give your agent this brain