DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

MoonLight
MoonLight

Posted on

flex box

Image description

Image description

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

Image description

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

Image description

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

Image description

main axis cross axis
Image description

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

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

Image description

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

Image description

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

Image description

justify-content: space-evenly;
Image description

justify-content: space-between;
Image description

.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; 
}
Enter fullscreen mode Exit fullscreen mode

Image description

.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; 
}
Enter fullscreen mode Exit fullscreen mode

Image description

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

Top comments (0)

We are hiring! Do you want to be our Senior Platform Engineer? We're hiring for a Senior Platform Engineer and would love for you to apply.

Head here to learn more about who we're looking for.