TIL - CSS-Flexbox

Layout method for arranging elements in rows or columns, automatically adapting to available space and facilitating rearrangements.
A parent container (with the CSS display:flex property) contains child elements (items) to be arranged.

• Guide to Flexbox
• interactive Flexbox
• combine rules
• flex-size of items
• good explanation of each flexbox-rule

center pictures with flexbox

.imgContainer{ display: flex; justify-content: center; align-items: center; overflow: hidden; height: 700px } img{ flex-shrink: 0; min-width: 100%; min-height: 100% } 

push Footer to the bottom

.wrapper{ display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; } 

Great Game to memorize flexbox rules