DEEP INTO FLEXBOX example-6
JADE
.container
.flex-box.flex-start
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.container
.flex-box.flex-end
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.container
.flex-box.center
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.container
.flex-box.stretch
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.container
.flex-box.space-around
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.container
.flex-box.space-between
.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;
flex-wrap: wrap;
height: 300px;
&.flex-start {
align-content: flex-start;
}
&.flex-end {
align-content: flex-end;
}
&.center {
align-content: center;
}
&.stretch {
align-content: stretch;
}
&.space-around {
align-content: space-around;
}
&.space-between {
align-content: space-between;
}
}
.flex-item {
background: pink;
margin: 10px;
padding: 10px;
width: 300px;
}
