DEEP INTO FLEXBOX example-10
JADE
.container
.flex-box
.flex-item.one
| a
.flex-item.two
| b
.flex-item.three
| c
.flex-item.four
| d
.flex-item.five
| e
SCSS
.container {
background: red;
padding: 10px;
margin: 10px;
}
.flex-box {
background: blue;
padding: 10px;
margin: 10px;
display: flex;
}
.flex-item {
background: pink;
margin: 10px;
padding: 10px;
&.one {
flex-basis: 200px;
}
&.two {
flex-basis: 20%;
}
&.three {
flex-basis: auto;
}
&.four {
flex-basis: 0;
}
&.five {
flex-basis: auto;
width: 200px;
}
}
