【CSS3】float使わずに最速でブロック要素を横均等に配置する方法「display:flex」 | degitekunote2

float:leftでの横並びから卒業！ 横並びの左右均等っていうと下記画像がそうですよね。これを実際に作って見ようと思います。 今までだったらこれを作るにはfloat:leftでもってli要素を回りこませて横並びにして、marginやらpaddingやらで装飾するのが一般的ですが、floatを使わないやり方もいくつか存在します。 その中でもflexボックスを使うとまぁ簡単に今回やりたいことが出来ちゃうわけですよ。 まずはHTMLを作っていきます 上の画像を元にulとliでもって形作っていきます。 <ul id="wrap"> <li class="box1 a"><p>ABCDEFG</p></li> <li class="box1 b"><p>HIJKLMN</p></li> <li class="box1 c"><p>OPQRSTU</p></li> </ul> <ul id="wr

[gainful31]

かみ。

[nffsjj]

メモっとこ。