DEEP INTO FLEXBOX example-7
JADE
.container
.flex-box
.flex-item.two
| a
.flex-item.four
| b
.flex-item.one
| c
.flex-item.three
| d
.container
.flex-box.wrap
.flex-item.two
| a
.flex-item.four
| b
.flex-item.one
| c
.flex-item.three
| d
.container
.flex-box.column
.flex-item.two
| a
.flex-item.four
| b
.flex-item.one
| c
.flex-item.three
| d
SCSS
.container {
background: red;
padding: 10px;
margin: 10px;
}
.flex-box {
background: blue;
padding: 10px;
margin: 10px;
display: flex;
&.wrap {
flex-wrap: wrap;
}
&.column {
flex-direction: column;
}
}
.flex-item {
background: pink;
margin: 10px;
padding: 10px;
width: 300px;
&.one {
order: 1;
}
&.two {
order: 2;
}
&.three {
order: 3;
}
&.four {
order: 4;
}
}
