Container width:600px; Element flex-basis:200px;

flex-shrink:

1
2
3
4


<div class="container">
<div class="flex-item1">1</div>
<div class="flex-item2">2</div>
<div class="flex-item3">3</div>
<div class="flex-item4">4</div>
</div>

.flex-item1{
  flex-grow: 01234;}
.flex-item2{
  flex-grow: 12;}
.flex-item3{
  flex-grow: 1;}
.flex-item4{
  flex-grow: 1;}

This defines the ability for a flex item to shrink if necessary. Negative numbers are invalid.

Back