CSS Flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Container
Enables a flex context for its direct children.
.container {
display: flex;
}flex-direction
.container {
flex-direction: row | row-reverse | column | column-reverse;
}flex-wrap
.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}justify-content
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}
/*
flex-start [[--][-][--] ]
flex-end [ [--][-][--]]
center [ [--][-][--] ]
space-between [[--] [-] [--]]
space-around [ [--] [-] [--] ]
space-eventy [ [--] [-] [--] ]
*/align-items
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end;
}
/*
stretch # # # #
# # # #
# # # #
flex-start # # # #
# # #
#
flex-end #
# # #
# # # #
*/align-content
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch;
}