Flexbox Demo

Flexbox Demo #1

flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
flex-grow: 1;
flex-grow: 1;

Flexbox Demo #2 (justify-content: space-around)

justify content: space-around;
flex-grow: 0;

Flexbox Demo #3 (justify content: space-between)

justify content: space-between;
flex-grow: 0;

Flexbox Demo #4 (justify content: space-evenly)

flex-grow: 0; justify-content: space-evenly;

Flexbox Demo #5 (flex-direction)

1
2
3
4
5
6
flex-direction: flex-direction: column-reverse;

Flexbox Demo #6 (flex-wrap)

flex-wrap: wrap;
background-color: crimson; min-width: 200px; flex-grow: 0;

Flexbox Demo #7 | flex-basis

background-color: hotpink;
max-height: 100px;
align-self: center;

Flexbox Demo #8 | flex-basis

flex-basis
flex-basis
flex-basis
flex-basis
flex-basis