flex box

.container{
    border: 3px solid lightgray;
    display: flex;
    /* ⚜️ */
    flex-direction: column-reverse;
}

.container{
    border: 3px solid lightgray;
    display: flex;
    /* ⚜️ */
    flex-direction: row;
}

.container{
    border: 3px solid lightgray;
    display: flex;
    /* ⚜️ */
    flex-direction: row-reverse;
}

main axis cross axis

❗️justify-content along the main axis
❗️align-items along the cross axis

.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
}

.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: flex-end;
}

.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: center; 
}

justify-content: space-evenly;

justify-content: space-between;

.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: center;
    /* row->cross -> use align-items */
    align-items:flex-end;
    height: 90vh; 
}

.container{
    border: 3px solid lightgray;
    display: flex;
    /* * * * */ 
    flex-direction: row;
    /* row->main->use justify-content  */
    justify-content: center;
    /* row->cross -> use align-items */
    align-items:center;
    height: 90vh; 
}

what happen if we changed height: vh?
height: 90vh;

height: 140vh; -> we should scroll the page

align-content

so if we add one more box we will see the box will be smaller!

so we should use flex-wrap: wrap;

but for beautifully that we use align-content

now I want to change -for example- box A position