TailwindCSS

Flexbox

Flexbox

• flex-initial
  • flex: 0 1 auto
  • allow a flex item to shrink but not grow, taking into account its initial size
• flex-1
  • flex: 1 1 0%;
  • allow a flex item to grow and shrink as needed, ignoring its initial size
• flex-auto
  • flex: 1 1 auto;
  • allow a flex item to grow and shrink, taking into account its initial size
• flex-none
  • flex: none;
  • prevent a flex item from growing or shrinking

Sizing

Width

• w-0 width: 0px;
• w-px width: 1px;
• w-0.5 width: 0.125rem; / 2px /
• w-1 width: 0.25rem; / 4px /
• w-auto width: auto;
• w-1/2 width: 50%;
• w-1/3 width: 33.333333%;
• w-2/3 width: 66.666667%;
• w-1/4 width: 25%;
• w-2/4 width: 50%;
• w-3/4 width: 75%;
• w-1/5 width: 20%;
• w-4/5 width: 80%;
• w-1/6 width: 16.666667%;
• w-5/6 width: 83.333333%;
• w-1/12 width: 8.333333%;
• w-11/12 width: 91.666667%;
• w-full width: 100%;
• w-screen width: 100vw;
• w-min width: min-content;
• w-max width: max-content;
• w-fit width: fit-content;

Max Width

• max-w-0 max-width: 0rem; / 0px /
• max-w-none max-width: none;
• max-w-xs max-width: 20rem; / 320px /
• max-w-sm max-width: 24rem; / 384px /
• max-w-md max-width: 28rem; / 448px /
• max-w-lg max-width: 32rem; / 512px /
• max-w-xl max-width: 36rem; / 576px /
• max-w-2xl max-width: 42rem; / 672px /
• max-w-7xl max-width: 80rem; / 1280px /
• max-w-full max-width: 100%;
• max-w-min max-width: min-content;
• max-w-max max-width: max-content;
• max-w-fit max-width: fit-content;
• max-w-prose max-width: 65ch;
• max-w-screen-sm sm max-width: 640px;
• max-w-screen-md md max-width: 768px;
• max-w-screen-lg lg max-width: 1024px;
• max-w-screen-xl xl max-width: 1280px;
• max-w-screen-2xl 2xl max-width: 1536px;