CSS の両端揃えを実現する div+css レイアウトの 4 つの方法の概要

<div class="box">
 <div class="demo">
     <div>1</div>
     <div>2</div> 
     <div>3</div>
 </div>
</div>

<スタイル>
。箱{
     幅:300px;マージン:自動;オーバーフロー:非表示;境界線:1px実線 #ddd;
}
.box .demo{
    左余白:-10px;幅:310px
}
.box .demo div{
     width:93.333px;/*(計算: (300-10*2)/3)*/
     フロート:左;
     左マージン:10px;
}
</スタイル>

<スタイル>
。デモ{
     マージン:0;パディング:0;
     テキスト配置:両端揃え;
     text-align-last:justify;/*IE サポートを解決する*/
     line-height:0;/*標準ブラウザコンテナの下部にある余分な空白スペースを解決します*/
}
@media すべておよび (-webkit-min-device-pixel-ratio:0) {
  。デモ{
     font-size:0;/*webkit は要素内で [改行] または [スペース文字] を使用した後、最後の要素内の余分なスペースをクリアします*/
  }
}
.demo:after{/*text-align-last:justify は IE でのみサポートされており、標準ブラウザでは同様の効果をシミュレートするために .demo:after 疑似クラスを使用する必要があります*/
     表示:インラインブロック;
     オーバーフロー:非表示;
     幅:100%;
     高さ:0;
     コンテンツ：'';
     vertical-align:top;/*Opera ブラウザは下部の余分なスペースを解決します*/
}
.demo div{
     幅:20%;
     表示:インラインブロック;
     text-align:center;/*上位要素の影響を解除*/
     テキストの最後揃え:中央;
     フォントサイズ:12px;
}
</スタイル>

<スタイル>
。デモ{
    ディスプレイ:-webkit-box;
    ディスプレイ:-webkit-flex;
    ディスプレイ:-ms-flexbox;
    ディスプレイ:フレックス;
    -webkit-box-pack: 正当化する;
    コンテンツ間のスペースを空ける
    -ms-flex-pack: 揃える;
    コンテンツの両端揃え:スペースの間;
}

.demo div{
     幅:30%; 
}
</スタイル>

<スタイル>
。デモ{
     -webkit-列数:3;-moz-列数:3;列数:3;
     -webkit-列間隔:10px;-moz-列間隔:10px;列間隔:10px; 
}

.demo div{
     
}
</スタイル>