How to distribute elements evenly inside a div?

Question

I have to place few elements evenly and fluidly inside another div as mocked below:

I've seen the trick using text-align:justify as given in (https://stackoverflow.com/a/6880421/2159250), But given one or two elements, its getting placed(justified) at right/left side as given below: (which is not what I'm looking for).

Any help would be greatly appreciated.

Answer 1

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>

* text-align-last property could be used in the future

Answer 2

This should be what you are looking for. It requires you to wrap your row elements inside a "dummy" div, but that should be fine.

.row {
  display: table;
  width: 100%;
  table-layout: fixed;
  margin-bottom: 10px;
}
.element-wrapper {
  display: table-cell;
  vertical-align: top;
}
.element {
  width: 80%;
  height: 100px;
  margin: auto;
  background: #ccc;
}

<div class="row">
  <div class="element-wrapper">
    <div class="element">Toto</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Titi</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Tata</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Tete</div>
  </div>
</div>
<div class="row">
  <div class="element-wrapper">
    <div class="element">Toto</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Titi</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Tata</div>
  </div>
</div>
<div class="row">
  <div class="element-wrapper">
    <div class="element">Toto</div>
  </div>
  <div class="element-wrapper">
    <div class="element">Titi</div>
  </div>
</div>