DEEP INTO FLEXBOX example-5
JADE
.container
.flex-box.flex-start
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.flex-box.flex-end
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.flex-box.center
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.flex-box.stretch
.flex-item
| a
.flex-item
| b
.flex-item
| c
.flex-item
| d
.flex-box.baseline
.flex-item
h1
| a
.flex-item
h2
| b
.flex-item
h3
| c
.flex-item
h4
| d
SCSS
.container {
background: red;
padding: 10px;
margin: 10px;
}
.flex-box {
background: blue;
padding: 10px;
margin: 10px;
display: flex;
height: 300px;
&.flex-start {
align-items: flex-start;
}
&.flex-end {
align-items: flex-end;
}
&.center {
align-items: center;
}
&.stretch {
align-items: stretch;
}
&.baseline {
align-items: baseline;
}
}
.flex-item {
background: pink;
margin: 10px;
padding: 10px;
}
