Justify elements with fix space (variable width)

Question

I have a container with a variable number of elements in it. The elements should be justified but with a fix space between (e.g. 20px). That means the width of

Answer 1

If using Flexbox is an option, you could add flex: 1 to the flex items and also a margin property with a fixed value as follows:

EXAMPLE HERE

div.container { display: flex; }

div.container div {
  height: 50px; /* Just for demo */
  flex: 1;
  margin-left: 20px;
}

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

Actually, flex: 1 is a shorthand of flex-grow: 1; in this case.