CSS align one item right with flexbox

Question

https   jsfiddle net vhem8scs   Is it possible to have two items align left and one item align right with flexbox  The link shows it more clearly  The last example is what I want to achieve   In flexbox I have one block of code  With float I have four blocks of code  That is one reason why I prefer flexbox   HTML   lt div class  wrap  gt     lt div gt One lt  div gt     lt div gt Two lt  div gt     lt div gt Three lt  div gt   lt  div gt    lt  -- DESIRED RESULT -- gt    lt div class  result  gt     lt div gt One lt  div gt     lt div gt Two lt  div gt     lt div gt Three lt  div gt   lt  div gt    CSS   wrap     display  flex    background   ccc    width  100     justify-content  space-between      result     background   ccc    margin-top  20px      result after     content        display  table    clear  both      result div     float  left     result div last-child     float  right

User · Answer

To align some elements  headerElement  in the center and the last element to the right  headerEnd      headerElement       margin-right  5       margin-left  5      headerEnd      margin-left  auto

User · Answer

To align one flex child to the right set it withmargin-left  auto   From the flex spec      One use of auto margins in the main axis is to separate flex items   into distinct  groups   The following example shows how to use this to   reproduce a common UI pattern - a single bar of actions with some   aligned on the left and others aligned on the right     wrap div last-child     margin-left  auto      Updated fiddle   x000D   x000D   wrap   x000D    display  flex  x000D    background   ccc  x000D    width  100   x000D    justify-content  space-between  x000D    x000D   wrap div last-child   x000D    margin-left  auto  x000D    x000D   result   x000D    background   ccc  x000D    margin-top  20px  x000D    x000D   result after   x000D    content      x000D    display  table  x000D    clear  both  x000D    x000D   result div   x000D    float  left  x000D    x000D   result div last-child   x000D    float  right  x000D    x000D   lt div class  wrap  gt  x000D     lt div gt One lt  div gt  x000D     lt div gt Two lt  div gt  x000D     lt div gt Three lt  div gt  x000D   lt  div gt  x000D   x000D   lt  -- DESIRED RESULT -- gt  x000D   lt div class  result  gt  x000D     lt div gt One lt  div gt  x000D     lt div gt Two lt  div gt  x000D     lt div gt Three lt  div gt  x000D   lt  div gt  x000D   x000D   x000D    Note    You could achieve a similar effect by setting flex-grow 1 on the middle flex item  or shorthand flex 1  which would push the last item all the way to the right   Demo   The obvious difference however is that the middle item becomes bigger than it may need to be  Add a border to the flex items to see the difference   Demo   x000D   x000D   wrap   x000D    display  flex  x000D    background   ccc  x000D    width  100   x000D    justify-content  space-between  x000D    x000D   wrap div   x000D    border  3px solid tomato  x000D    x000D   margin div last-child   x000D    margin-left  auto  x000D    x000D   grow div nth-child 2    x000D    flex  1  x000D    x000D   result   x000D    background   ccc  x000D    margin-top  20px  x000D    x000D   result after   x000D    content      x000D    display  table  x000D    clear  both  x000D    x000D   result div   x000D    float  left  x000D    x000D   result div last-child   x000D    float  right  x000D    x000D   lt div class  wrap margin  gt  x000D     lt div gt One lt  div gt  x000D     lt div gt Two lt  div gt  x000D     lt div gt Three lt  div gt  x000D   lt  div gt  x000D   x000D   lt div class  wrap grow  gt  x000D     lt div gt One lt  div gt  x000D     lt div gt Two lt  div gt  x000D     lt div gt Three lt  div gt  x000D   lt  div gt  x000D   x000D   lt  -- DESIRED RESULT -- gt  x000D   lt div class  result  gt  x000D     lt div gt One lt  div gt  x000D     lt div gt Two lt  div gt  x000D     lt div gt Three lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

For a terse  pure flexbox option  group the left-aligned items and the right-aligned items    lt div class  wrap  gt     lt div gt       lt span gt One lt  span gt       lt span gt Two lt  span gt     lt  div gt     lt div gt Three lt  div gt   lt  div gt    and use space-between    wrap     display  flex    background   ccc    justify-content  space-between      This way you can group multiple items to the right or just one    https   jsfiddle net c9mkewwv 3

[css] CSS align one item right with flexbox

Examples related to css

Examples related to alignment

Examples related to flexbox