-1

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 |
handsome
  • 2,335
  • 7
  • 45
  • 73

3 Answers3

1
.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.

AlleXyS
  • 2,476
  • 2
  • 17
  • 37
  • Please don't post only code as an answer, but also provide an explanation what your code does and how it solves the problem of the question. Answer with an explanation are usually of better quality, and are more likely to attract upvotes. – Mark Rotteveel Mar 27 '20 at 10:16
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

Alireza HI
  • 1,873
  • 1
  • 12
  • 20
0
.row {
display: flex;
justify-content: flex-end; 
}
David Buck
  • 3,752
  • 35
  • 31
  • 35
Vigilant Straight
  • 19
  • 2
  • Please don't post only code as an answer, but also provide an explanation what your code does and how it solves the problem of the question. Answer with an explanation are usually of better quality, and are more likely to attract upvotes. – Mark Rotteveel Mar 27 '20 at 10:33