.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
Top comments (0)