×
  • CSS Flexbox – Complete Beginners Guide

  • Flex Shrink

    Lesson List

    On the other side of flex-grow, we also have a Flex Shrink property. As might you have already guess flex-shrink defines the ability for a flex item to shrink if necessary and unlike a flex-grow the default value for flex-shrink is 1.


    Flex Shrink

    The first point to make note of is that flex-shrink is set to a value of 1 by default for every single flex item thatโ€™s the reason if we try to reduce the flex container it reduce and shrinks the items inside it.
    letโ€™s say you donโ€™t want to allow the shrink the items inside the flex container. for that simply set the flex-shrink value to 0.

    style.css
    ...
    .flex-item {
      ...
      flex-shrink : 0  /* Default is 1 */
    }
    ...
    

    After this, if you shrink the browser the flex items will overflow right away. otherwise, the item gets shrink of its available space.

    Flex Shrink Individual

    We can shrink the items individually, what it will do is it will shrink that particular item as per the value assign.
    for e.g, if the flex-shrink value is given 4 then it will shrink that particular item 4 times relative to the other items.

    style.css
    ...
    .item-2 {
      ...
      flex-shrink : 4  /* Default is 1 */
    }
    ...
    

    Flex Shrinking Example
    In the above 2nd example, you can see the item-3 is more shrunk then the other items.


    Demo

    See the Pen Flex Shrink
    by rehmaanali (@geekstrick) on CodePen.

    Flex Shrink Property
    .
    .
  • We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
    Accept