*{
    box-sizing:border-box;
}

body{
    background-color: aliceblue;
}

.block{
    background-color: burlywood;
    height:200px;
    margin:20px;
    padding:20px;
}

.inline{
    background-color:lightgreen;
    width:100px;
    height:50px;
    margin:50px;
    padding:50px;
    display:inline-block;
}

.container{
    background-color:blanchedalmond;
    padding:20px;
    display:flex;
    height: 600px;

    flex-direction:row;
    /* flex-direction establishes main axis, the default is horizonatal, row is default */

    flex-wrap:wrap;

    /* flex-flow is just direction and wrap in one so these two could just be     flex-flow: row wrap;
  */
    
    justify-content:space-between;
    /* aligns along main axis:default here is horizontal. and then we have 2 cross-axis alignments */

    /* align items, defines how flex items are laid out on the cross-axis (vertical here) meant for non-wrapping items */
    align-items:center;
    
    /* align-content can be used for cross-axis wrapping items */
    align-content:flex-end;

    gap:20px;
    /* gap better than margin */

}

.item{
    background-color:chartreuse;
    padding:10px;
    border:1px solid;
    width:100px;
}