Move flex items to the top and bottom

Moving flex items to the top depends on the orientation of the main axis. If it's vertical, we need to set justify-content, if it's horizontal, we need to set align-items

Code Structure vertical flex items
.flexcontainer {
 display: flex;
 flex-direction: column;
 justify-content: flex-start;
}

Note: Try justify-content: flex-end to move flex items to the bottom.

Example


Code Structure for horizontal flex items
.flexcontainer {
 display: flex;
 flex-direction: row;
 align-items: flex-start;
}

Note: Try align-items: flex-end to move flex items to the bottom.

Example

Share this

Related Posts