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; }
JAVASCRIPT
Expand for more options Login