Flexbox Demo

flexbox demo #1

flex-grow 1
flex-grow 1
flex-grow 1
flex-grow 1
flex-grow 1

flexbox demo #2 (justify-content: space-around;)

flexbox demo #3 (justify-content: space-between;)

flexbox demo #4 (justify-content: space-evenly;)

flexbox demo #5 (flex-direction: row-reverse;)

1
2
3
4
5

flexbox demo #6 (flex-wrap: wrap;)

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

flexbox demo #7

flexbox demo #8

flex-basis: 25%;
flex-basis: 25%;
flex-basis: 25%;
flex-basis: 25%;
flex-basis: 25%;
flex-basis: 25%;
flex-basis: 25%;