Move flex items to the left and right

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

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

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

Example


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

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

Example

Share this

Related Posts