* {
    margin: 0;
    padding: 0;
}

.rowitem {
    background-color: aquamarine;
    border: 2px solid black;
    text-align: center;
    /* height: 100px; */
    width: 150px;
}

.colitem {
    border: 1px solid red;
    background-color: crimson;
    text-align: center;
}


.rowcontainer {
    height: 400px;
    background-color: gainsboro;
    /* Nothing new so far!  Let's change the display to flex */

    display: flex;

    /* The default for flex-direction is row */
    flex-direction: row;

    /* flex-direction: column; */

    /* flex-direction: row-reverse; */
    /*flex-direction: whatever-reverse reverses the order of the items in the flexbox (bottom to top or right to left)*/
    /* flex-direction: column-reverse; */

    /*let's choose row - Now that we know we are working in a row, we can have flexbox do the heavy lifting for us to handle common alignment/spacing scenarios*/

    /* Let's add a gap between our items */

    gap: 5px;

    /* Remember, we're in the container, not the item. if we were in the item we could set a margin but, in flexbox we can say add a gap between anything inside of the flexbox*/

    /* justify-content -- this is the big one.  This aligns things across the main axis */

    /* justify-content: flex-start; */
    /*flex-start is the default (starts on the left)*/

    /* center everything */
    /* justify-content: center; */

    /* left justify */
    /* justify-content: flex-start; */

    /* right justify */
    /* justify-content: flex-end;  */

    /* equal space between items (starts at the edges)*/
    /* justify-content: space-between; */

    /*equal space around items*/
    /* justify-content: space-around; */

    /* equal space between items */
    /* justify-content: space-evenly; */


    /* We can also align our things along the cross access */
    /* stretch is the default (stretches across the whole container) ignored if explicit height given*/

    /* align-items: center; */

    /* align-items: start; */

    /* align-items: end; */

    /*let's stop to think about this though...what if we choose flex-direction:column?  Then the main axis and cross axis swap.  Everything still works! */


    /* OK, let's set  our direction to row, our gap to5 and our align-items to center.  Now, watch what happens when we shrink our screen -- hmm, everything shrinks 
                What if we don't want them to shrink.  Wouldn't it be nice to be able to wrap them...wait a minute...we can!
            */

    flex-wrap: wrap;
}


#item1 {
    flex-grow: 1;
    /*max size - 0 means don't grow*/
    flex-shrink: 0;
    /*min size 1 means shrink evenly*/
    /* flex-basis: auto; */
    /*preferred size - auto uses width or the content size*/
    flex-basis: 200px;

    /* flex: 0 1 auto; */
}

#item2 {
    flex-grow: 1;
    /*max size - 0 means don't grow*/
    flex-shrink: 0;
    /*min size 1 means shrink evenly*/
    /* flex-basis: auto; */
    /*preferred size - auto uses width or the content size*/
    flex-basis: 200px;

    /* flex: 0 1 auto; */
    order: -1;
    /*swaps order of things in flexbox (number is change wanted relative to current position (i.e. -1 is moving one slot left of current position))*/
    align-self: center;
    /*aligns this specific item in the flexbox*/
}

#item3 {
    flex-grow: 1;
    /*max size - 0 means don't grow*/
    flex-shrink: 0;
    /*min size 1 means shrink evenly*/
    /* flex-basis: auto; */
    /*preferred size - auto uses width or the content size*/
    flex-basis: 200px;

    /* flex: 0 1 auto; */
}

.colitem {
    height: 100px;
}

.colcontainer {
    background-color: darkcyan;
    display: flex;
    flex-direction: column;
    height: 400px;
    gap: 5px;
    justify-content: space-evenly;
    align-items: center;
}

#item4 {
    /* flex: 1 2 auto; */
}

#item5 {
    /* flex: 1 2 auto; */
}