Равное разделение между элементами в div

Question

Предположим, у меня есть div, 100px wide и переменное число (от 1 до 6) элементов, 10px wide, внутри этого div.

Как можно более равномерно интервалы между ними так, чтобы:

• если есть один элемент внутри, не будет каким-либо дополнительный Spacing

  если есть от 2 до 6 элементов, интервал между каждым будет быть 80px (для 2), 35px (для 3), 20px (для 4), и т.д ...

Первый элемент всегда будет помещен в крайнем левом положении, без заполнения и последнего элемента всегда будет место d в самом правильном положении, также без заполнения.

Меня не интересует IE, поэтому это может быть CSS3. В любом случае, меня беспокоит javascript. Я знаю, что это будет 1 лайнер в JS, но я, конечно, хочу избежать его, если это возможно, поэтому, пожалуйста, воздержитесь ответить, если вы собираетесь разместить решение JS.

С уважением

Edit:

Пример: http://codepen.io/anon/pen/wbiFA

HTML

<div class="container"> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
    <div class="item"> 
    </div> 
</div> 

CSS:

.container { 
    width: 900px; 
    border: 1px solid red; 
    display: flex; 
    justify-content: space-between; 
    height: 50px; 
} 

.item { 
    border: 1px solid blue; 
    flex-basis: auto; 
    width: 171px 
} 

Хорошо, это сделал :)

Answer 1

Использование Flexbox мне удалось достаточно близкий результата:

http://codepen.io/coljung/pen/bufmh

.container { 
    border: 1px solid red; 
    width:1000px; 
    height:100px; 
    display: flex; 
    justify-content: space-around; 
} 

.item { 
    border: 1px solid blue; 
    background:red; 
    width:100px; 
    height:100%; 
} 

Теперь, он не достичь точных отступов вы ищете. В этом случае вы должны сделать это вручную для каждого отдельного случая.

Answer 2

Вам не нужны функции CSS3, такие как гибкие коробки. Следующие функции CSS2.1 достаточно:

• text-align:justify
• display: inline-block
• ::after псевдо-элемент

.container { 
 
    width: 900px; 
 
    border: 1px solid red; 
 
    height: 50px; 
 
    text-align: justify; 
 
} 
 
.container:after { 
 
    content: ''; 
 
    width: 100%; 
 
    display: inline-block; 
 
} 
 
.item { 
 
    border: 1px solid blue; 
 
    width: 171px; 
 
    height: 100%; 
 
    display: inline-block; 
 
}

<div class="container"> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
    <div class="item"></div> 
 
</div>