For example, use md:flex-shrink-0 to apply the flex-shrink-0 utility at only medium screen sizes and above. Learn how to use Flexbox with this Flexbox visualization tool The flex-grow and flex-shrink properties control how much a flex-item should “grow” (extend) if there are extra spaces, or “shrink… Note: Negative numbers are invalid. The flex property is shorthand to set flex-grow, flex-shrink, and flex-basis properties in one statement; its default value is 0 1 auto. How to set flex-basis, flex-grow, and flex-shrink on flex items It defaults to a value of 0, which means that the item won’t take up available empty space. 2. .flex-item {-webkit-flex-grow:; /_ Safari _/ flex-grow:;} If all flex items have same value for flex-grow than all items have same size in the container The second flex item takes up more space relative to the size of the other flex items. Properties for the Parent display Quickly manage the layout, alignment, and sizing of grid columns, navigation, components, and more with a full suite of responsive flexbox utilities. Default value: 0. Notice the “row” div is the flex-container, and we don’t set the size of the items there. flex-shrink flex-grow. The flex property is actually a shorthand property for 3 properties: flex-grow, flex-shrink, and flex-basis. With flex-grow we can control the amount of space that a flex item takes compared to the other items.flex-grow accepts a numeric value and it represents a fraction of the available space, depending on the flex-grow value of the other items. Flexbox. When flex-shrink is set to '1', all flex items have an even amount of space removed from them to ensure no overflow. When flex items are too big for the container element, they auto-shrink down instead of overflowing. For more information about Tailwind's responsive design features, check out the Responsive Design documentation. We defined the size of the cells inside the flex-item by setting flex: 1 1 auto;. Flex-grow and flex-shrink. It is said that there is 'negative space' outside of the container. If you are new to or unfamiliar with flexbox, we encourage you to read this CSS-Tricks flexbox guide. The beauty of flex items is being “flexible.” The flex-grow and flex-shrink properties allow us play around this “flexibility” even more.