scrimba
Responsive Design
Taking flexbox to the next level
flex-grow and flex-shrink explained
Go Pro!Bootcamp

Bootcamp

Study group

Collaborate with peers in your dedicated #study-group channel.

Code reviews

Submit projects for review using the /review command in your #code-reviews channel

flex-grow and flex-shrink explained
AboutCommentsNotes
flex-grow and flex-shrink explained
Expand for more info
styles.css
run
preview
console
* { box-sizing: border-box; }

body {
margin: 0;
background: #2C73D2;
color: #fff;
text-align: center;
}

.flex-container {
border: 10px solid #F9F871;
width: 80%;
margin: 0 auto;
padding: .25em;

display: flex;
}

.flex-item {
background: #8BEE86;
margin: .5em;
padding: .5em;
color: #424656;
}
Console
index.html
-5:06