flexを使った配置1(横の位置)flexを使ってfloatのような配置を実装します。配置デザインCSSCSS3CSS3より追加されたflexのサンプルです。flexという言葉の通りこれがあればレイアウトをうまいことやってくれるのでfloatやmarginで悩むことが減りそうです。わかりやすいように親子関係の入れ子の箱のスタイルを用意しました。center;}</style>ここからflexのプロパティのバリエーションを実装していきます。ノーマルなflexの記述。class="demo_item">D</div></div>float:leftににていますが、本領は幅を子要素より小さくすると、親に合わせてうまいこと縮小されます。子要素は横幅固定にしている場合でも可変するので、気を付けたほうがよさそうです。次は子要素の幅に親要素の幅を合わせる場合。class="demo_item">D</div></div>こちらもfloatに似ていますね。続いては子要素を右へ寄せたい場合。class="demo_item">D</div></div>こちらはfloat:rightににています。上記ではなく、順番そのままで右に寄せたい場合。class="demo_item">D</div></div>これは結構便利です。ほかの方法で実装しようとするとアレコレ大変です。ちなみにjustify-contentの通常の左寄せはflex-startとなります。見た目は最初のサンプルと同じなので割愛。次はセンター寄せです。class="demo_item">D</div></div>子要素が並んだままセンターに寄せてくれます。こちらも他の方法だと面倒なので、結構重宝するのではないでしょうか。