align items to the right using flexbox [duplicate] - css

Question

This question already has answers here:
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
how to align a flex item to the right?
.row {
display: flex;
text-align: right; //nothing happens
}
<div className="row">
<div className="col">content</div>
</div>
the output of this is something like
| content |
and I´m looking for
| content |

Answer 1

Aligning items in flex needs to be handled using justify-content or align-items
You need to use justify-content in your code:
.row {
display: flex;
justify-content: flex-end;
}
When you use display:flex for an element it has a default flex-direction with value of row. it means your inner elements will be placed in a row. This direction(row) is your main direction. justify-content will specify the location of your items in their main direction.
The value of justify-content can be flex-start, flex-end, etc. You need to set it to flex-end which in your situation means right side.
I highly recommend you to read the below link for more information:
justify-content:
This defines the alignment along the main axis. It helps distribute extra free space leftover when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size. It also exerts some control over the alignment of items when they overflow the line. A Complete Guide to Flexbox

Answer 2

.row {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
First, you need to specify the direction of items (flex-direction) as row (horizontally) or column (vertically).
Then, if direction is row, align items using justify-content property with flex-end value. This will align items from the right to left (from the end of row to the start) / (oX axis)
If direction is column, align items using align-items property which have almost same values as justify-content, but is configured for vertically align (oY axis)
This post can help.

Answer 3

.row {
display: flex;
justify-content: flex-end;
}