div内の要素を隣り合わせに均等に分散させる方法は？

これはメニュー用です。
たとえば、3つのスパンを持つdiv要素があり、そのすべてにマージン、最大幅、フロート（左または右）があります。
左側から配置され、次のようになります。次のよう
[[span1][span2][span3] - lots of free space here].
に均等にしたい：
[[span1] - space - [span2] - space - [span3]]
CSSを使用してこれを行うにはどうすればよいですか？それが不可能だと私はちょっと疑っています。
メニュー項目を追加または削除するときに同じスタイルを維持したいことに注意してください。
HTML：

<div id="menu">
    <span class="menuitem"></span>
    <span class="menuitem"></span>
    <span class="menuitem"></span>
</div>

CSS：

#menu {
    ...
    width:800px;
}
.menuitem {
    display:block;
    float:left;
    margin-left:25px;
    position:relative;
    min-height:35px;
    max-width:125px;
    padding-bottom:10px;
    text-align:center;
}

「昔」では、テーブルを使用し、メニュー項目は、項目数の幅を明示的に指定しなくても、等間隔に配置されていました。

IE 6および7がそうでなかった場合（それが懸念される場合）、CSSでも同じことができます。

<div class="demo">
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

CSS：

div.demo {
    display: table;
    width: 100%;
    table-layout: fixed;    /* For cells of equal size */
}
div.demo span {
    display: table-cell;
    text-align: center;
}

アイテム数を調整する必要はありません。

例なしtable-layout:fixed-セルは全幅に均等に分散されますが、幅は内容によって決定されるため、必ずしも同じサイズである必要はありません。

• http://jsfiddle.net/w3dx/ULQwf/

table-layout:fixed-の例-セルは、その内容に関係なく、同じサイズです。（この追加に対するコメントの@DavidHerseに感謝します。）

• http://jsfiddle.net/kqHWM/

最初と最後のメニュー要素を左右揃えにしたい場合は、次のCSSを追加できます。

div.demo span:first-child {
    text-align: left;
}
div.demo span:last-child {
    text-align: right;
}

正当化を使用できます。

これは他の回答と似ていますが、左端と右端の要素が等間隔ではなく端にある点が異なります-[。a..b..cの代わりにa ... b ... c]

<div class="menu">
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

<style>
.menu {text-align:justify;}
.menu:after { content:' '; display:inline-block; width: 100%; height: 0 }
.menu > span {display:inline-block} 
</style>

1つの落とし穴は、各要素の間にスペースを残さなければならないということです。[フィドルを参照してください。]

メニュー項目をインラインブロックに設定する理由は2つあります。

1. 要素がデフォルトでブロックレベルの項目（など<li>）である場合、同じ行にとどまるには、表示をインラインまたはインラインブロックに設定する必要があります。
2. 要素に複数の単語（<span>click here</span>）がある場合、インラインに設定すると各単語が均等に分散されますが、インラインブロックに設定すると要素のみが分散されます。

JSFiddleを参照してください

編集：フレックスボックスが広くサポートされて
いるので（すべて非IE、およびIE 10+）、「より良い方法」があります。
上記と同じ要素構造を想定すると、必要なのは次のとおりです。

<style>
    .menu { display: flex; justify-content: space-between; }
</style>

外側の要素にも間隔を空ける必要がある場合は、スペース間をスペースアラウンドに切り替えるだけです。
JSFiddleを参照してください

少し異なるアプローチを試したい場合は、FLEXを使用できます。

HTML

<div class="test">
    <div>Div 1</div>
    <div>Div 2</div>
    <div>Div 3</div>
    <div>Div 4</div>
</div>

CSS

.test {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-around;
}
.test > div {
    margin-top: 10px;
    padding: 20px;
    background-color: #FF0000;
}

これがフィドルです：http：//jsfiddle.net/ynemh3c2/（divの追加/削除も試してください）

これについて私が学んだ場所は次のとおりです：https：//css-tricks.com/snippets/css/a-guide- to-flexbox /

justify-content: space-betweenそしてdisplay: flex、我々は必要なすべてが、インスピレーションのための@Pratulに感謝です！

これはそれを行うための迅速かつ簡単な方法です

<div>
    <span>Span 1</span>
    <span>Span 2</span>
    <span>Span 3</span>
</div>

css

div{
    width:100%;
}
span{
    display:inline-block;    
    width:33%;
    text-align:center;
}

次に、あなたが持っている数に合わせてのwidthを調整しspanます。

例：http：//jsfiddle.net/jasongennaro/wvJxD/

次の#menuように、idを持つdivをフレックスコンテナとして表示する必要があります。

#menu{
    width: 800px;
    display: flex;
    justify-content: space-between;
}

私は次のcssの組み合わせでそれを行うことができました：

text-align: justify;
text-align-last: justify;
text-justify: inter-word;

すべてのスパンをインラインブロック要素で使用します。メニュー項目を含むスパンのリストの下に、幅が100％の空のストレッチスパンを作成します。次に、スパンを含むdivをtext-align：justifiedにします。これにより、インラインブロック要素[メニュー項目]が均等に分散されます。

https://jsfiddle.net/freedawirl/bh0eadzz/3/

  <div id="container">

          <div class="social">
            <a href="#" target="_blank" aria-label="facebook-link">
            <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="twitter-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="youtube-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="pinterest-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="snapchat-link">
                <img src="http://placehold.it/40x40">
            </a>
            <a href="#" target="_blank" aria-label="blog-link">
                 <img src="http://placehold.it/40x40">
            </a>

            <a href="#" aria-label="phone-link">
                 <img src="http://placehold.it/40x40">
            </a>
            <span class="stretch"></span>
          </div>
             </div>