5) Flex Samples

 

.container { display: flex; }
.container { display: inline-flex }
.container { flex-direction: row | row-reverse | column | column-reverse; }
.container{ flex-wrap: nowrap | wrap | wrap-reverse; }

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

.container {
     justify-content: flex-start | flex-end | center | 
    space-between | space-around | space-evenly;
     }
.container { align-items: flex-start | flex-end | 
    center | baseline | stretch; }
.container {
    align-content: flex-start | flex-end | center | 
    space-between | space-around | stretch;
    }

.item { order: <integer>; }

.item { flex-grow: <number>; }
.item { flex-shrink: <number>; }
.item { flex-basis: <length> | auto; }
.item { flex: none | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ] }

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }