Distribute Elements Evenly Using CSS

How to equally distribute elements horizontally using CSS

Using flexbox, you can do something like this:

.parent {    display: flex;    justify-content: space-between;}
span.circle {  height: 20px;  width: 20px;  border-radius: 100%;  border: 1px solid #eee;  background:#ddd;     cursor: pointer;  transition: all 0.4s ease-in-out;}

<div class="parent">    <span id="first" class="border-change circle"></span>    <span id="second" class="circle"></span>    <span id="third" class="circle"></span>    <span id="fourth" class="circle"></span>    <span id="five" class="circle"></span>    <span id="six" class="circle"></span>    <span id="seven" class="circle"></span>    <span id="eight" class="circle"></span>    <span id="nine" class="circle"></span>    <span id="ten" class="circle"></span>    <span id="eleven" class="circle"></span></div>

how to distribute elements vertically evenly while keeping free float using CSS

Here:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Set the following props to parent container

display: flex;
flex-wrap: wrap;
align-items: space-between;

evenly distribute an arbitrary number of elements in an HTML container

Use flexbox:

.container{
display:flex;
justify-content:space-between;
}

You can use space-between or space-around.

How to distribute elements evenly across rows in a flexbox?

Assuming flex-direction: row and that three <div></div> elements fit on one line, is it possible for the browser to display 2 on each line, for two lines, instead of displaying 3 on one line, and then 1 on the next?

Implicit in that statement is that each of the divs is equal to or less than 1/3 width of a complete row.

Thus normally your result would be say....

#flex {  display: flex;  flex-wrap: wrap;  background: orange;}#flex div {  border: 1px solid white;  height: 100px;  width: 33%;  background: rebeccapurple;}

<div id="flex">  <div></div>  <div></div>  <div></div>  <div></div></div>

How to distribute elements evenly inside a div?

Left aligned content looks like this (one or more dots represent a whitespace):

+----------------------------------------------+
|word.word.word.word                           |
+----------------------------------------------+

(1) text-align: justify does not justify the last (or the only) line*. One simple solution is to add a very long word which can only fit on a line of its own:

+----------------------------------------------+
|word..........word..........word..........word|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

(2) You want whitespace before the first and after the last word. One simple solution is to add dummy words in order to produce the following result:

+----------------------------------------------+
|dummy....word....word....word....word....dummy|
|longword_longword_longword_longword_longword_l|
+----------------------------------------------+

The desired result can be achieved by adding additional markup. For example:

.row {    text-align: justify;}.row:after {    display: inline-block;    content: "";    width: 100%;}.box {    display: inline-block;}.dummy {    display: inline-block;}/**** FOR TESTING ****/.row {    margin: 1em 0;    background: #FC0;}.box {    background: #F0C;    width: 4em;    height: 5em;}.box:nth-child(even) {    background: #0CF;    width: 8em;}

<div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="dummy"></div></div><div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="box"></div>    <div class="box"></div>    <div class="dummy"></div></div><div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="box"></div>    <div class="dummy"></div></div><div class="row">    <div class="dummy"></div>    <div class="box"></div>    <div class="dummy"></div></div>

How to spread elements horizontally evenly?

Try this (http://jsfiddle.net/BYEw5/):

<div class="container">
  <div>A</div><div>B</div><div>C</div>
</div>

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    width: 33%;
    text-align: center;
}

Since you're dealing with inline-block, you can't have spaces between the tags (ugly, but it works), otherwise the space will be visible.

Edit 1:
Here is some more info on the inline-block issues: http://blog.another-d-mention.ro/programming/cross-browser-inline-block/, http://www.aarongloege.com/blog/web-development/css/cross-browser-inline-block/. You may also have to add display: -moz-inline-box;.

Edit 2:
Also, 33%*3 is not 100%. If you truly want 100% and don't mind some space between the divs you could do:

.container > div {
    display: inline-block;
    display: -moz-inline-box;
    *display: inline; /* For IE7 */
    zoom: 1; /* Trigger hasLayout */
    margin-left: 2%;
    width: 32%;
    text-align: center;
}

.container > div:first-child {
    margin-left: 0;
}