css flexbox — flexbox center horizontally and vertically

Notice that when the flex direction is a column, justify-content changes to the vertical and align-items to the horizontal.

#pond {
  display: flex;
  flex-flow:column-reverse wrap-reverse;
  align-content:space-between;
  justify-content:center;
}

It took me 1 hour to figure out this answer

damn. wrap-reverse.

https://www.w3schools.com/cssref/playit.asp?filename=playcss_flex-flow

flexbox Froggy

#html

<div class="key-container">
            <div>A <span>clap</span></div>
            <div>S <span>Huhat</span></div>
            <div>D <span>kick</span></div>
            <div>F <span>openhat</span></div>
            <div>G <span>boom</span></div>
            <div>H <span>ride</span></div>
            <div>J <span>snare</span></div>
            <div>k <span>tom</span></div>
            <div>L <span>tink</span></div>
</div>

1. parent div.class — key-container

2. child divs

#scss

.key-container{
    //@include toBeCenter;
    display: -webkit-flex; /* Safari */
    display: flex;
    height: 500px;
    flex-wrap: wrap;
    flex-direction: row;
    background-color: #2196F3;
    justify-content: center; // horizentally
    align-content: center; // vertically
> div {
        flex: auto;
        width: 100px;
        margin: 10px;
        background-color: rgba(255, 255, 255, 0.8);
        text-align: center;
        //padding: 10px 0;
        font-size: 20px;
        color: #313131;
> span{
            margin:0;
            display: block;
        }
}
}

#add

.key-container{ 
   height: 100vh; // 100% doesn't work 
   align-items: center;
}

Flexbox Cheatsheet

A Complete Guide to Flexbox | CSS-Tricks

Centering Things in CSS Using Flexbox

• you can practice and grasp how flexbox works by playing a game

Flexbox Froggy

https://flexbox.io/