flex-shrink # 04

 flex-shrink

We can set the size of every child element under the parent element. The flex-shrink property will work when we minimize the browser.

Flex-shrink works only when the total size of the flex items is larger than the flex container size. 

 

If we set shrink value 0, the child element will not respond to shrink.

Flex-shrink is used alongside the other flex properties flex-grow and flex-basis and is usually defined using the flex shorthand.

Example 1

CSS

.container {
    width: 350px;
    height: 300px;
    display: flex;
    margin: 0 auto;
    background-color: orange;
}

.container div {
    flex-shrink: 1;
    flex-basis: 100px;
    height: 200px;
}

.child1 {
    background-color: blue;
}

.container>.child2 {
    background-color: red;
    flex-shrink: 3;
}

.container>.child3 {
    background-color: green;
    flex-shrink: 2;
}

.child4 {
    background-color: yellow;
}

.child5 {
    background-color: violet;
}

HTML

<div class="container">
    <div class="child1">Child 1</div>
    <div class="child2">Child 2</div>
    <div class="child3">Child 3</div>
    <div class="child4">Child 4</div>
    <div class="child5">Child 5</div>
</div>

Example 2

HTML

 <div id="main">
  <div style="background-color:coral;"></div>
  <div style="background-color:lightblue;"></div>
  <div style="background-color:khaki;"></div>
  <div style="background-color:pink;"></div>
  <div style="background-color:lightgrey;"></div>
 </div>

CSS

 #main {
  width: 350px;
  height: 100px;
  border: 1px solid #c3c3c3;
  display: flex;
}
 
#main div {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 100px;
}

#main div:nth-of-type(2) {
    flex-shrink: 2;
    background-color: DodgerBlue;
    color: white;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}

Previous PostNext Post