YouTip

Tailwind CSS provides powerful utility classes for managing layouts, especially Flexbox and Grid. These utility classes for Flexbox and Grid allow you to create responsive, flexible layouts very efficiently without writing custom CSS. Tailwind CSS's philosophy is to control layouts through low-level utility classes (utility-first), flexibly combining classes to meet different design needs. * * * ## 1、Flexbox Layout Flexbox is a layout mode that helps developers create one-dimensional (horizontal or vertical) layouts. Tailwind CSS provides several concise utility classes to control various aspects of Flexbox layout, including direction, alignment, and flex. ### Setting Up a Flex Container To create a Flexbox layout, you first need to set an element as a flex container. ## Example [Try it »](#) flex sets the element's display to flex, enabling Flexbox layout. Utility classes for flex item initial size and their corresponding CSS properties: | Tailwind Class | CSS Property and Value | Description | | --- | --- | --- | | `basis-0` | `flex-basis:0px;` | Sets the base size of the flex item to 0px. | | `basis-1` | `flex-basis:0.25rem;` | Sets the base size of the flex item to 4px. | | `basis-2` | `flex-basis:0.5rem;` | Sets the base size of the flex item to 8px. | | `basis-3` | `flex-basis:0.75rem;` | Sets the base size of the flex item to 12px. | | `basis-4` | `flex-basis:1rem;` | Sets the base size of the flex item to 16px. | | `basis-5` | `flex-basis:1.25rem;` | Sets the base size of the flex item to 20px. | | `basis-6` | `flex-basis:1.5rem;` | Sets the base size of the flex item to 24px. | | `basis-7` | `flex-basis:1.75rem;` | Sets the base size of the flex item to 28px. | | `basis-8` | `flex-basis:2rem;` | Sets the base size of the flex item to 32px. | | `basis-9` | `flex-basis:2.25rem;` | Sets the base size of the flex item to 36px. | | `basis-10` | `flex-basis:2.5rem;` | Sets the base size of the flex item to 40px. | | `basis-11` | `flex-basis:2.75rem;` | Sets the base size of the flex item to 44px. | | `basis-12` | `flex-basis:3rem;` | Sets the base size of the flex item to 48px. | | `basis-14` | `flex-basis:3.5rem;` | Sets the base size of the flex item to 56px. | | `basis-16` | `flex-basis:4rem;` | Sets the base size of the flex item to 64px. | | `basis-20` | `flex-basis:5rem;` | Sets the base size of the flex item to 80px. | | `basis-24` | `flex-basis:6rem;` | Sets the base size of the flex item to 96px. | | `basis-28` | `flex-basis:7rem;` | Sets the base size of the flex item to 112px. | | `basis-32` | `flex-basis:8rem;` | Sets the base size of the flex item to 128px. | | `basis-36` | `flex-basis:9rem;` | Sets the base size of the flex item to 144px. | | `basis-40` | `flex-basis:10rem;` | Sets the base size of the flex item to 160px. | | `basis-44` | `flex-basis:11rem;` | Sets the base size of the flex item to 176px. | | `basis-48` | `flex-basis:12rem;` | Sets the base size of the flex item to 192px. | | `basis-52` | `flex-basis:13rem;` | Sets the base size of the flex item to 208px. | | `basis-56` | `flex-basis:14rem;` | Sets the base size of the flex item to 224px. | | `basis-60` | `flex-basis:15rem;` | Sets the base size of the flex item to 240px. | | `basis-64` | `flex-basis:16rem;` | Sets the base size of the flex item to 256px. | | `basis-72` | `flex-basis:18rem;` | Sets the base size of the flex item to 288px. | | `basis-80` | `flex-basis:20rem;` | Sets the base size of the flex item to 320px. | | `basis-96` | `flex-basis:24rem;` | Sets the base size of the flex item to 384px. | | `basis-auto` | `flex-basis:auto;` | Sets the base size of the flex item to auto. | | `basis-px` | `flex-basis:1px;` | Sets the base size of the flex item to 1px. | | `basis-0.5` | `flex-basis:0.125rem;` | Sets the base size of the flex item to 2px. | | `basis-1.5` | `flex-basis:0.375rem;` | Sets the base size of the flex item to 6px. | | `basis-2.5` | `flex-basis:0.625rem;` | Sets the base size of the flex item to 10px. | | `basis-3.5` | `flex-basis:0.875rem;` | Sets the base size of the flex item to 14px. | | `basis-1/2` | `flex-basis:50%;` | Sets the base size of the flex item to half the container width. | | `basis-1/3` | `flex-basis:33.333333%;` | Sets the base size of the flex item to one-third of the container width. | | `basis-2/3` | `flex-basis:66.666667%;` | Sets the base size of the flex item to two-thirds of the container width. | | `basis-1/4` | `flex-basis:25%;` | Sets the base size of the flex item to one-quarter of the container width. | | `basis-2/4` | `flex-basis:50%;` | Sets the base size of the flex item to half the container width. | | `basis-3/4` | `flex-basis:75%;` | Sets the base size of the flex item to three-quarters of the container width. | | `basis-1/5` | `flex-basis:20%;` | Sets the base size of the flex item to one-fifth of the container width. | | `basis-2/5` | `flex-basis:40%;` | Sets the base size of the flex item to two-fifths of the container width. | | `basis-3/5` | `flex-basis:60%;` | Sets the base size of the flex item to three-fifths of the container width. | | `basis-4/5` | `flex-basis:80%;` | Sets the base size of the flex item to four-fifths of the container width. | | `basis-1/6` | `flex-basis:16.666667%;` | Sets the base size of the flex item to one-sixth of the container width. | | `basis-2/6` | `flex-basis:33.333333%;` | Sets the base size of the flex item to two-sixths of the container width. | | `basis-3/6` | `flex-basis:50%;` | Sets the base size of the flex item to two-thirds of the container width. | | `basis-4/6` | `flex-basis:66.666667%;` | Sets the base size of the flex item to four-sixths of the container width. | | `basis-5/6` | `flex-basis:83.333333%;` | Sets the base size of the flex item to five-sixths of the container width. | | `