Understanding and Implementing the Flex Properties

.container{
 display: flex;
 display: inline-flex;
}

.container{
 flex-direction: row;
 flex-direction: row-reverse;
 flex-direction: column;
 flex-direction: column-reverse;
}

.container{
 justify-content: normal;
 justify-content: space-between; 
 justify-content: space-around; 
 justify-content: space-evenly;
 justify-content: stretch;
 justify-content: center|start
 |end|flex-start|flex-end|left|right;
}

.container{
 flex-grow: 3;
 flex-grow: 0.6;
 flex-grow: inherit;
 flex-grow: initial;
 flex-grow: revert;
 flex-grow: revert-layer;
}

.container{
 flex-wrap: nowrap;
 flex-wrap: wrap;
 flex-wrap: wrap-reverse;
 flex-wrap: inherit;
}

.container{
 flex-flow: row;
 flex-flow: row-reverse;
 flex-flow: column;
 flex-flow: column-reverse;
 flex-flow: nowrap;
 flex-flow: wrap;
 flex-flow: wrap-reverse;
 flex-flow: row nowrap;
 flex-flow: column wrap;
 flex-flow: column-reverse 
 wrap-reverse;
}

.container{
 align-self: center; 
 align-self: start; 
 align-self: end; 
 align-self: self-start; 
 align-self: self-end; 
 align-self: flex-start; 
 align-self: flex-end; 
}

.container{
 flex: 2;
 flex: 10em;
 flex: 30%;
 flex: min-content;
 flex: 1 30px;
 flex: 2 2;
 flex: 2 2 10%;
}

.container{
 flex-shrink: 1;
 flex-shrink: 2;
 flex-shrink: 0.6;
}