how to evenly distribute elements in a div next to each other

Question

This is meant for a menu  For example I have a div element with 3 spans in it  all of which have some margin  max-width and float  left or right   It is positioned starting from the left side and goes like this    span1  span2  span3       - lots of free space here   I want to make it even out like this    span1  - space -  span2  - space -  span3   How can I do this using CSS  I kinda doubt it is not possible  Note that I want it to keep the same style when I add or remove a menu item  HTML    lt div id  menu  gt       lt span class  menuitem  gt  lt  span gt       lt span class  menuitem  gt  lt  span gt       lt span class  menuitem  gt  lt  span gt   lt  div gt    CSS      menu               width 800px     menuitem       display block      float left      margin-left 25px      position relative      min-height 35px      max-width 125px      padding-bottom 10px      text-align center

User · Answer

You just need to display the  div with id  menu as flex container like this    menu      width  800px      display  flex      justify-content  space-between

User · Answer

Make all spans used inline-block elements  Create an empty stretch span with a 100  width beneath the list of spans containing the menu items  Next make the div containing the spans text-align  justified  This would then force the inline-block elements  your menu items  to evenly distribute   https   jsfiddle net freedawirl bh0eadzz 3      lt div id  container  gt              lt div class  social  gt               lt a href     target   blank  aria-label  facebook-link  gt               lt img src  http   placehold it 40x40  gt               lt  a gt               lt a href     target   blank  aria-label  twitter-link  gt                   lt img src  http   placehold it 40x40  gt               lt  a gt               lt a href     target   blank  aria-label  youtube-link  gt                   lt img src  http   placehold it 40x40  gt               lt  a gt               lt a href     target   blank  aria-label  pinterest-link  gt                    lt img src  http   placehold it 40x40  gt               lt  a gt               lt a href     target   blank  aria-label  snapchat-link  gt                   lt img src  http   placehold it 40x40  gt               lt  a gt               lt a href     target   blank  aria-label  blog-link  gt                    lt img src  http   placehold it 40x40  gt               lt  a gt                lt a href     aria-label  phone-link  gt                    lt img src  http   placehold it 40x40  gt               lt  a gt               lt span class  stretch  gt  lt  span gt             lt  div gt                lt  div gt

User · Answer

justify-content  space-betweenanddisplay  flex is all we needed  but thanks to  Pratul for the inspiration

User · Answer

I have managed to do it with the following css combination   text-align  justify  text-align-last  justify  text-justify  inter-word

User · Answer

In the  old days  you d use a table and your menu items would be evenly spaced without having to explicitly state the width for the number of items   If it wasn t for IE 6 and 7  if that is of concern  then you can do the same in CSS    lt div class  demo  gt       lt span gt Span 1 lt  span gt       lt span gt Span 2 lt  span gt       lt span gt Span 3 lt  span gt   lt  div gt    CSS     div demo       display  table      width  100       table-layout  fixed        For cells of equal size      div demo span       display  table-cell      text-align  center      Without having to adjust for the number of items   Example without table-layout fixed - the cells are evenly distributed across the full width  but they are not necessarily of equal size since their width is determined by their contents    http   jsfiddle net w3dx ULQwf    Example with table-layout fixed - the cells are of equal size  regardless of their contents   Thanks to  DavidHerse in comments for this addition     http   jsfiddle net kqHWM    If you want the first and last menu elements to be left and right justified  then you can add the following CSS   div demo span first-child       text-align  left    div demo span last-child       text-align  right

User · Answer

x000D   x000D   container   x000D    padding  10px  x000D    x000D   parent   x000D    width  100   x000D    background   7b7b7b  x000D    display  flex  x000D    justify-content  space-between  x000D    height  4px  x000D    x000D   child   x000D    color   fff  x000D    background  green  x000D    padding  10px 10px  x000D    border-radius  50   x000D    position  relative  x000D    top  -8px  x000D    x000D   lt div class  container  gt  x000D     lt div class  parent  gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D       lt span class  child  gt  lt  span gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

If someone wants to try a slightly different approach  they can use FLEX  HTML   lt div class  test  gt       lt div gt Div 1 lt  div gt       lt div gt Div 2 lt  div gt       lt div gt Div 3 lt  div gt       lt div gt Div 4 lt  div gt   lt  div gt    CSS   test       display  flex      flex-flow  row wrap      justify-content  space-around     test  gt  div       margin-top  10px      padding  20px      background-color   FF0000      Here is the fiddle  http   jsfiddle net ynemh3c2   Try adding removing divs as well  Here is where I learned about this  https   css-tricks com snippets css a-guide-to-flexbox

User · Answer

You can use justify      This is similar to the other answers  except that the left and rightmost elements will be at the edges instead of being equally spaced -  a   b   c instead of  a  b  c     lt div class  menu  gt       lt span gt 1 lt  span gt       lt span gt 2 lt  span gt       lt span gt 3 lt  span gt   lt  div gt    lt style gt   menu  text-align justify    menu after   content      display inline-block  width  100   height  0    menu  gt  span  display inline-block    lt  style gt    One gotcha is that you must leave spaces in between each element   See the fiddle    There are two reasons to set the menu items to inline-block    If the element is by default a block level item  such as an  lt li gt   the display must be set to inline or inline-block to stay in the same line  If the element has more than one word   lt span gt click here lt  span gt    each word will be distributed evenly when set to inline  but only the elements will be distributed when set to inline-block      See the JSFiddle  EDIT  Now that flexbox has wide support  all non-IE  and IE 10    there is a  better way   Assuming the same element structure as above  all you need is    lt style gt       menu   display  flex  justify-content  space-between     lt  style gt    If you want the outer elements to be spaced as well  just switch space-between to space-around  See the JSFiddle

User · Answer

This is the quick and easy way to do it   lt div gt       lt span gt Span 1 lt  span gt       lt span gt Span 2 lt  span gt       lt span gt Span 3 lt  span gt   lt  div gt    css  div      width 100     span      display inline-block          width 33       text-align center      Then adjust the width of the spans for the number you have    Example  http   jsfiddle net jasongennaro wvJxD

[css] how to evenly distribute elements in a div next to each other?

Examples related to css