From the course: Tailwind CSS 4 Essential Training

Unlock this course with a free trial

Join today to access over 24,800 courses taught by industry experts.

Sizing flex items and nesting

Sizing flex items and nesting - Tailwind CSS Tutorial

From the course: Tailwind CSS 4 Essential Training

Start my 1-month free trial Buy for my team

Sizing flex items and nesting

“

- [Instructor] Continuing with the same example, you must have noticed that these flex items do not occupy the same size. Their widths or sizes are based on the content within. Also, they shrink when there is less space available but do not expand even when there is more space in the container, right? This behavior is changed using the flex CSS property. Not the flex class, which sets the display property to flex, but instead, the flex CSS property, and in Tailwind, you have four utility classes for four different flex values. Now, each of these flex values have a combination of flex grow, flex shrink, and flex basis. We'll see what individually all of these mean, but, together, there are four values that you can use, and the default is flex-initial, which means an item does not grow to occupy more space, but it shrinks, and its initial value is set to auto, which means it occupies space based on the content within. If you want the items to grow as well, we can set flex-auto to any of…

Contents