How to Right-align flex item?
CSS | flex-box
Flex-box is simply a web layout method that allows developers to align the elements easily and much more. The whole concept of flex-box depends on two major pillars: main-axis and cross-axis.
To align the flex items left/right, We need to deal with the main-axis, which can be done using flex-box properties. A detailed explanation is given below:
Example 1: Right aligning flex item using flex-direction property
When flex-direction is set as “row-reverse” it not only right aligns the flex items but reverses the order of the items also. In simple words, flex-items now expand from right to left as shown in the given figure.
Example 2: Right aligning flex item using justify-content property
When justify-content is set to “flex-end”, it instantly shifts all the flex-items to the end of the flex-container along the main-axis, i.e flex items get right aligned. It is different from the above-used method in terms of direction only as in this, flex-items will expand from left to right only. It will be more clear with the given figure.