/* ##### FlexBox ##### */
/* Parent element */
.flex-parent {display:flex; justify-content:center;}
.flex-row {flex-direction:row;}
.flex-row-reverse {flex-direction:row-reverse;}
.flex-column {flex-direction:column;}
.flex-column-reverse {flex-direction:column-reverse;}
.wrap {flex-wrap:wrap;}
.nowrap {flex-wrap:nowrap;}
.align-content-center {align-content:center;}
.align-items-stretch {align-items:stretch;}
.align-items-center {align-items:center;}
.flex-start {justify-content:flex-start;}
.flex-end {justify-content:flex-end;}
.space-between {justify-content:space-between;}
.space-around {justify-content:space-around;}
.space-evenly {justify-content:space-evenly;}
/* Child element */
.flex-child {flex:0 1 auto;}
.flex-child.auto {flex:auto;}
.flex-child30 {flex-basis:30%;}
.flex-child40 {flex-basis:40%;}
.flex-child50 {flex-basis:50%;}
.flex-child60 {flex-basis:60%;}
.flex-child70 {flex-basis:70%;}
.align-self-start {align-self:flex-start;}
.align-self-end {align-self:flex-end;}
.align-self-center {align-self:center;}
.align-self-stretch {align-self:stretch;}


/* ########## Grid-Layout ########## */
/* Parent element */
.grid-parent {display:grid; align-items:start /* start center end stretch */; justify-items:center /* start center end stretch */;}
.grid-parent.reverse .grid-child:nth-of-type(1) {order:2;}
.grid-parent.reverse .grid-child:nth-of-type(2) {order:1;}

/* Child element
.grid-child p:first-of-type {margin-top:0;}
.grid-child p:last-of-type {margin-bottom:0;}
*/
.grid-child.justify-start {justify-self:start;}
.grid-child.justify-center {justify-self:center;}
.grid-child.justify-end {justify-self:end;}
.grid-child.justify-stretch {justify-self:stretch;}

.grid-child.align-start {align-self:start;}
.grid-child.align-center {align-self:center;}
.grid-child.align-end {align-self:end;}
.grid-child.align-stretch {align-self:stretch;}