在水平線上均勻分配div

Question

我試圖在水平線上均勻分配div。我將在屏幕的最大寬度上有3個div。當我調整瀏覽器的大小並且它不適合3時，它將切換到兩個，然後是一個。我已經找到了幾個這樣做的例子，但是他們沒有一個以我尋找的方式進行。比如我要的是這樣的：

全屏寬度：

[------------------------------------------] 
[ [--------] [--------] [--------] ] 
[ [  ] [  ] [  ] ] 
[ [  ] [  ] [  ] ] 
[ [--------] [--------] [--------] ] 
[           ] 
[ [--------] [--------] [--------] ] 
[ [  ] [  ] [  ] ] 
[ [  ] [  ] [  ] ] 
[ [--------] [--------] [--------] ] 
[------------------------------------------] 

調整大小寬度：

[-----------------------------] 
[ [--------] [--------] ] 
[ [  ] [  ] ] 
[ [  ] [  ] ] 
[ [--------] [--------] ] 
[        ] 
[ [--------] [--------] ] 
[ [  ] [  ] ] 
[ [  ] [  ] ] 
[ [--------] [--------] ] 
[        ] 
[ [--------] [--------] ] 
[ [  ] [  ] ] 
[ [  ] [  ] ] 
[ [--------] [--------] ] 
[-----------------------------] 

注意的div在頁面上的每一次居中。

什麼我能找到所要留給這些例子迫使的div和右側與div的邊界，然後空間evently分佈如下面的例子：

[-----------------------------] 
[[--------]   [--------]] 
[[  ]   [  ]] 
[[  ]   [  ]] 
[[--------]   [--------]] 
[        ] 
[[--------]   [--------]] 
[[  ]   [  ]] 
[[  ]   [  ]] 
[[--------]   [--------]] 
[        ] 
[[--------]   [--------]] 
[[  ]   [  ]] 
[[  ]   [  ]] 
[[--------]   [--------]] 
[-----------------------------] 

這裏是代碼什麼樣的例子我想：

• http://jsfiddle.net/k9FqG/ ---這一次只能 文本對齊的原因，但是，這並不對div的，只是文本。我需要文字到 左對齊。當我調整 瀏覽器時，這也不會降低div。
• http://radiatingstar.com/distribute-divs-images-equaly-line
• http://jsfiddle.net/BYEw5/ ---這一次只能 文本對齊的原因，但是，這並不對div的，只是文本。我需要文字到 左對齊。當我調整 瀏覽器時，這也不會降低div。

Answer 1

希望這是你正在嘗試做什麼！

CSS

#container { 
width:100%; 
text-align:center; 
} 
#container > div { 
width: calc(100%/6); 
display: inline-block; 
vertical-align: top; 
border:1px solid red; 
text-align:center; 
margin:2%;  
padding:20px; 
} 

HTML

<div id="container"> 
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>6</div> 
</div> 

看到它在行動在http://jsfiddle.net/bvgn46hu/1

Answer 2

所有現代瀏覽器現在也支持靈活的內容（純CSS）。如果你不知道前手的元素個數：

#container { 
    justify-content: flex-start | flex-end | center | space-between | space-around; 
} 

看到這裏 https://css-tricks.com/snippets/css/a-guide-to-flexbox/