JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div id="flex-box-container">
     <div></div>
     <div></div>
     <div></div>
     <div></div>
     <div></div>
</div>

CSS

#flex-box-container{
     width: 350px;
     height: 100px;
     border: 7px solid silver;
     display: flex;
}
#flex-box-container div{
     flex-grow: 1;
     flex-shrink: 1;
     flex-basis: 100px;
}
#flex-box-container div:nth-of-type(2){
     flex-shrink: 3;
}
#flex-box-container div:nth-of-type(1){
     background: rgb(0, 137, 250);
}
#flex-box-container div:nth-of-type(2){
     background: rgb(255, 0, 43);
}
#flex-box-container div:nth-of-type(3){
     background: rgb(255, 169, 0);
}
#flex-box-container div:nth-of-type(4){
     background: rgb(0, 167, 83);
}
#flex-box-container div:nth-of-type(5){
     background: #e51b33;
}