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 · Utilities reference · all subjects

flex

11 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 API reference

The flex utilities control the CSS flex property and accept the following classes: flex-<number> produces flex: <number>; flex-<fraction> produces flex: calc(<fraction> * 100%); flex-auto produces flex: auto; flex-initial produces flex: 0 auto; flex-none produces flex: none; flex-(<custom-property>) produces flex: var(<custom-property>); flex-[<value>] produces flex: <value>;

flex-1 utility basic behavior

The flex-1 utility allows a flex item to grow and shrink as needed, ignoring its initial size. It sets flex: 1;

flex-initial utility behavior

The flex-initial utility allows a flex item to shrink but not grow, taking into account its initial size. It sets 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. It sets flex: auto;

flex-none utility behavior

The flex-none utility prevents a flex item from growing or shrinking. It sets flex: none;

flex-1 basic example

Example showing flex-1 usage: <div class="flex"><div class="w-14 flex-none ...">01</div><div class="w-64 flex-1 ...">02</div><div class="w-32 flex-1 ...">03</div></div>

flex-initial example

Example showing flex-initial usage: <div class="flex"><div class="w-14 flex-none ...">01</div><div class="w-64 flex-initial ...">02</div><div class="w-32 flex-initial ...">03</div></div>

flex-auto example

Example showing flex-auto usage: <div class="flex ..."><div class="w-14 flex-none ...">01</div><div class="w-64 flex-auto ...">02</div><div class="w-32 flex-auto ...">03</div></div>

flex-none example

Example showing flex-none usage: <div class="flex ..."><div class="w-14 flex-none ...">01</div><div class="w-32 flex-none ...">02</div><div class="flex-1 ...">03</div></div>

flex utilities support responsive design

All flex utilities support responsive design using Tailwind's responsive variant syntax, such as sm:flex-1 to apply the utility at the small breakpoint.

flex utilities support custom values

Flex utilities support custom values using the bracket notation syntax, such as flex-[<custom-value>] to apply a custom flex value.

Give your agent this brain