xxxxxxxxxx
<!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>
xxxxxxxxxx
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 */}
xxxxxxxxxx
.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. */
}