DEEP INTO FLEXBOX example-3
JADE
.container
.flex-box.no-wrap
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.container
.flex-box.wrap
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.container
.flex-box.wrap-reverse
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
SCSS
.container {
background: red;
padding: 10px;
margin: 10px;
}
.flex-box {
background: blue;
padding: 10px;
margin: 10px;
display: flex;
&.no-wrap {
flex-wrap: no-wrap;
}
&.wrap {
flex-wrap: wrap;
}
&.wrap-reverse {
flex-wrap: wrap-reverse;
}
}
.flex-item {
background: pink;
padding: 10px;
margin: 10px;
width: 300px;
}
