* {
    margin: 0;
    padding: 0;
}

.rowitem {
    background-color: aquamarine;
    border: 2px solid black;
    text-align: center;
    /* 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; */
    /* flex-direction: row; */
    /* The default for flex-direction is row */

    /* flex-direction: row; */

    /* flex-direction: column; */

    /* flex-direction: row-reverse; */

    /* 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 */

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

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

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

    /* equal space between items */
    /* 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 */

    /* 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: 0;
    /*max size - 0 means don't grow*/
    flex-shrink: 1;
    /*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: 0;
    /*max size - 0 means don't grow*/
    flex-shrink: 1;
    /*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; */
}

#item3 {
    flex-grow: 0;
    /*max size - 0 means don't grow*/
    flex-shrink: 1;
    /*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; */
}