Flex-shrink is a CSS property that determines how much a flex item will shrink relative to the rest of the items in the flex container when there isn't enough space. It allows for more control over the layout by specifying the shrink factor, which dictates the rate at which an item reduces in size compared to its siblings.

Flex-shrink

CSS property

A 'Flex Item' is a child element within a flex container that is subject to the flexible layout model, allowing it to adapt its size and position according to available space and defined flex properties. It provides a powerful mechanism for creating responsive designs by adjusting its dimensions and order based on the container's configuration and the properties assigned to each item.

flex item

A Flex Container is a foundational element of the CSS Flexible Box Layout module, used to create a flexible and efficient layout structure by controlling the alignment, direction, and order of its child elements. It allows developers to design responsive web interfaces that adapt seamlessly to different screen sizes and orientations.

flex container

shrink factor

Layout Control

Item size reduction

Relative shrinkage

Flexbox layout is like a magic box that helps arrange things neatly on a webpage, so they fit nicely no matter how big or small the screen is. It makes sure everything stays in order and looks good, just like when we put our toys in a line or stack them in a box.

Relevant Degrees

Log in to see lessons