How to Right-align flex item

Question

Is there a more flexbox-ish way to right-align  Contact  than to use position  absolute    x000D   x000D   main   display  flex    x000D   a   b   c   background   efefef  border  1px solid  999    x000D   b   flex  1  text-align  center    x000D   c   position  absolute  right  0    x000D   lt h2 gt With title lt  h2 gt  x000D   lt div class  main  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   lt h2 gt Without title lt  h2 gt  x000D   lt div class  main  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt  -- lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt -- gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    http   jsfiddle net vqDK9

User · Accepted Answer

Here you go  Set justify-content  space-between on the flex container     x000D   x000D   main    x000D      display  flex   x000D      justify-content  space-between  x000D      x000D   a   b   c   background   efefef  border  1px solid  999    x000D   b   text-align  center    x000D   lt h2 gt With title lt  h2 gt  x000D   lt div class  main  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   lt h2 gt Without title lt  h2 gt  x000D   lt div class  main  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D   lt  --      lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt  -- gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Example code based on answer by TetraDev    Images on right    x000D   x000D      x000D    outline   4px dashed red  x000D    x000D   x000D   main   x000D    display  flex  x000D    flex-direction  row  x000D    align-items  center  x000D    x000D   x000D  h1   x000D    flex-basis  100   x000D    x000D   x000D  img   x000D    margin  0 5px  x000D    height  30px  x000D    x000D   lt div class  main  gt  x000D     lt h1 gt Secure Payment lt  h1 gt  x000D     lt img src  https   i stack imgur com i65gn png  gt  x000D     lt img src  https   i stack imgur com i65gn png  gt  x000D   lt  div gt  x000D   x000D   x000D    Images on left     x000D   x000D      x000D    outline   4px dashed red  x000D    x000D   x000D   main   x000D    display  flex  x000D    flex-direction  row  x000D    align-items  center  x000D    x000D   x000D  h1   x000D    flex-basis  100   x000D    text-align  right  x000D    x000D   x000D  img   x000D    margin  0 5px  x000D    height  30px  x000D    x000D   lt div class  main  gt  x000D     lt img src  https   i stack imgur com i65gn png  gt  x000D     lt img src  https   i stack imgur com i65gn png  gt  x000D     lt h1 gt Secure Payment lt  h1 gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

margin-left  auto works well  But clean flex box solution would be space-between in the main class  Space between works well if there is two or more elements  I have added a solution for single element as well   x000D   x000D   main   display  flex  justify-content  space-between     a   b   c   background   efefef  border  1px solid  999  padding  0 25rem  margin  0 25rem    b   flex  1  text-align  center      c-wrapper     display  flex    flex  1    justify-content  flex-end      c-wrapper2     display  flex    flex  1    flex-flow  row-reverse    x000D   lt div class  main  gt       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt       lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt   lt  div gt    lt div class  main  gt       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt   lt  div gt    lt div class  main  gt       lt div class  c-wrapper  gt         lt a class  c  href     gt Contact lt  a gt         lt a class  c  href     gt Contact2 lt  a gt       lt  div gt   lt  div gt   lt div class  main  gt       lt div class  c-wrapper2  gt         lt span class  c  gt Contact lt  span gt         lt span class  c  gt Contact2 lt  span gt       lt  div gt   lt  div gt  x000D   x000D   x000D

User · Answer

I find that adding  justify-content  flex-end  to the flex container solves the problem while  justify-content  space-between  doesnt do anything

User · Answer

Or you could just use justify-content  flex-end   main   display  flex     c   justify-content  flex-end

User · Answer

A more flex approach would be to use an auto left margin  flex items treat auto margins a bit differently than when used in a block formatting context     c       margin-left  auto      Updated fiddle    x000D   x000D   main   display  flex    x000D   a   b   c   background   efefef  border  1px solid  999    x000D   b   flex  1  text-align  center    x000D   c  margin-left  auto   x000D   lt h2 gt With title lt  h2 gt  x000D   lt div class  main  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   lt h2 gt Without title lt  h2 gt  x000D   lt div class  main  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt  -- lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt -- gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   lt h1 gt Problem lt  h1 gt  x000D   lt p gt Is there a more flexbox-ish way to right align  Contact  than to use position absolute  lt  p gt  x000D   x000D   x000D

User · Answer

As easy as   main       display  flex      flex-direction row-reverse

User · Answer

If you want to use flexbox for this  you should be able to  by doing this  display  flex on the container  flex  1 on the items  and text-align  right on  c     main   display  flex     a   b   c       background   efefef      border  1px solid  999      flex  1     b   text-align  center     c   text-align  right         or alternatively  even simpler   if the items don t need to meet  you can use justify-content  space-between on the container and remove the text-align rules completely    main   display  flex  justify-content  space-between     a   b   c   background   efefef  border  1px solid  999      Here s a demo on Codepen to allow you to quickly try the above

User · Answer

justify-content  flex-end  worked within price box container    price-box       justify-content  flex-end

User · Answer

You can also use a filler to fill the remaining space    lt div class  main  gt       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt       lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt       lt div class  filler  gt  lt  div gt       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt   lt  div gt    filler      flex-grow  1      I have updated the solution with 3 different versions  This because of the discussion of the validity of using an additional filler element  If you run the code snipped you see that all solutions do different things  For instance setting the filler class on item b will make this item fill the remaining space  This has the benefit that there is no  dead  space that is not clickable    x000D   x000D   lt div class  mainfiller  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt  x000D       lt div class  filler  gt  lt  div gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  mainfiller  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt div class  filler b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D   x000D   lt div class  main  gt  x000D       lt div class  a  gt  lt a href     gt Home lt  a gt  lt  div gt  x000D       lt div class  b  gt  lt a href     gt Some title centered lt  a gt  lt  div gt  x000D       lt div class  c  gt  lt a href     gt Contact lt  a gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt style gt  x000D   main   display  flex  justify-content  space-between    x000D   mainfiller display  flex   x000D   filler flex-grow 1  text-align center  x000D   a   b   c   background  yellow  border  1px solid  999    x000D   lt  style gt  x000D   x000D   x000D

User · Answer

For those using Angular and Flex-Layout  use the following on the flex-item container    lt div fxLayout  row  fxLayoutAlign  flex-end  gt   See fxLayoutAlign docs here and the full fxLayout docs here

User · Answer

If you need one item to be left aligned  like a header  but then multiple items right aligned  like 3 images   then you would do something like this   h1      flex-basis  100      forces this element to take up any remaining space    img      margin  0 5px     small margin between images    height  50px     image width will be in relation to height  in case images are large - optional if images are already the proper size     Here s what that will look like  only relavent CSS was included in snippet above

User · Answer

Add the following CSS class to your stylesheet    my-spacer       flex  1 1 auto      Place an empty element between the element on the left and the element you wish to right-align    lt span class  my-spacer  gt  lt  span gt

[html] How to Right-align flex item?

Examples related to html

Examples related to css

Examples related to flexbox