Breaking News: Grepper is joining You.com. Read the official announcement!

how to use flex-shrink in css

Add Answer

Lucky Louse answered on May 2, 2022 Popularity 10/10 Helpfulness 3/10

answer how to use flex-shrink in css

related flexbox flex-shrink

related flex-shrink Property

how to use flex-shrink in css

Comment

<!DOCTYPE html>
<html>
<head>
    <title>flex-shrink</title>
    <style>
        body {
            width: 400px;
            display: flex;
        }
        div {
            border: 1px solid black;
            flex-basis: 100px;
        }
        .item1 {
            flex-shrink: 5;
        }
        .item2 {
            flex-shrink: 1;
        }.item3 {
            flex-shrink: 2;
        }.item4 {
            flex-shrink: 2;
        }.item5 {
            flex-shrink: 2;
        }
    </style>
</head>
<body>
    <div class="item1">item1</div>
    <div class="item2">item2</div>
    <div class="item3">item3</div>
    <div class="item4">item4</div>
    <div class="item5">item5</div>
</body>
</html>

Popularity 10/10 Helpfulness 3/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on May 02 2022

Lucky Louse

0 Answers Avg Quality 2/10

Closely Related Answers

flexbox flex-shrink

Comment

by default flex-shrink is 1 so when flex-item don't have enough space
in flex container then width descrease.
.flex-item {flex-shrink:0 } or flex-shrink: 10 will decrease that item 10 times.
it will not shrink and items are overflow when there is no space.
.flex-container {display:flex;}
.flex-item{ width:300px; flex-shrink:0; /*it will not shrink */}
.flex-item-2{flex-shrink:10; /*only item 2 will shrink by 10 times */}

Popularity 10/10 Helpfulness 2/10 Language css

Source: Grepper

Tags: css

Link to this answer
Share Copy Link

Contributed on Dec 03 2022

Shirshak Kandel

0 Answers Avg Quality 2/10

flex-shrink Property

Comment

.container {
  display: flex;
}

.item-a {
  flex-shrink: 1; 
  /* The value 1 indicates that the item should shrink. */
}

.item-b {
  flex-shrink: 2; 
  /* The value 2 indicates that the item should shrink twice than the element item-a. */
}

Popularity 7/10 Helpfulness 1/10 Language css

Source: www.codecademy.com

Tags: css

Link to this answer
Share Copy Link

Contributed on Mar 01 2024

Worried Wildebeest

0 Answers Avg Quality 2/10

how to use flex-shrink in css

Contents

More Related Answers

how to use flex-shrink in css

Closely Related Answers

flexbox flex-shrink

flex-shrink Property

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.