*{  
    box-sizing: border-box ;
    margin: 0;
    padding: 0;
}
main{
    background: gray;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
}
section, article{
    margin: 1rem;
    border: solid 3px;
    display: flex;
    border-radius: 1rem;

}
section{
    background: purple;
    width: 600px;
    flex-wrap: wrap;

}
article{
    background: orange;
    width: 100px;
    height: 100px;
    padding: 1rem;
    font-size: 3rem;
}
#s1{
    flex-direction: row ;
    justify-content: center;

}
#s2{
    flex-direction: row-reverse;
    justify-content: flex-start;

}
#s3 { 
    flex-direction: column;
    justify-content: flex-end;
    height: 450px;
}
#s4{
    flex-direction: column-reverse;
    justify-content: space-between;
    height: 450px;
}