Suggest an editImprove this articleRefine the answer for “How do you align an element individually?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**`align-self`** lets you individually align a single flex item along the cross axis, overriding `align-items` only for that element; to align along the main axis, the `margin: auto` trick is used. **Key point:** `align-self` is individual alignment along the cross axis, while `margin: auto` is a trick for individual alignment along the main axis.Shown above the full answer for quick recall.Answer (EN)ImageTo align a single flex item individually, the following property is used: ```javascript align-self ``` This property overrides `align-items`, but **only for a specific element**. Example: ```css .item { align-self: center; } ``` The possible values match those of `align-items`: ```javascript align-self: auto | flex-start | flex-end | center | baseline | stretch; ``` Also, if you need to align an element **along the main axis individually**, you can use `margin: auto;`: a specific trick that lets you "push" the element away from the others in the needed direction. For example: ```css .item { margin-left: auto; /* push the element to the right in a row direction */ } ``` ## Summary | Property | What for | |---|---| | `align-self` | individual alignment along the cross axis | | `margin:auto` | individual alignment along the main axis (a trick for a single element) |For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.