【CSS】今の要素の横並びってどうやるのがいいのか的な話【flex】

かれこれ2011年あたりに勉強を始めて、実務として扱っていたのが3年以上前なもんで、その当時は一部IEでCSSが対応しなかったりしてた時期だったかなーと、今思うと何かと懐かしいもんですね。frameとtargetが10年以上前って時代の流れがすごい。

しばらくブランクのあった出戻りでもあるので、今ってfloat以外でやってるのかとか、仕事でもなあなあにしていた部分もあるので改めて調べ直してみました。

※ほぼ自分用忘備雑記に近い投稿なのでご参考程度に。

学び始めた当初は横並びの王道のように扱われていましたが、そもそもは文章の挿絵のように使う目的のプロパティです。

下のコンテンツをclearしないと回り込んじゃうやつ。

そもそもブロック要素のHTMLを、ブロック要素の特徴を保持したまま、インライン要素（aやspanのような）にするもの。

幅やmarginが指定できるのもメリットの１つ。

このプロパティで横並びを作ると隙間ができてしまう(文字としての改行が間に入るらしい)のがデフォルトのようです。

float以前のレイアウト目的に使われちゃっていたのがtableだったとかはだいぶ昔の話。。。とか昔の話はともかく、

スマホの表示に対応するときにtableタグを分解するよりも、divやul、liなどで作ったコンテンツをPCでtableのように表示させるときによく使っていました。

時刻表や集計データなどそもそも表として使うものに当てるのがいいんじゃないでしょうか。

本題。flexboxはCSS3でのレイアウトの主流なんだそうです。（調べてよかった！！！新サイトfloatで組む寸前だっt）

ということでdisplay:flexを使ったレイアウトでこれから組んでいきたいと思います。

画像ではわかりやすいように100%幅(max764px)で左右margin部分を灰色にしています。デザインがえらいこっちゃですけど追々整えます！！！

ひとまず、子要素を囲む親要素に対して「display:flex;」のみを適応すると、上の画像のように、一列上に分割、左から右に配置されます。

予め各要素にリセットをかけているのでmarginなどの余白を消しています。

目いっぱい隙間なく配置されてますね。

これを3カラム1列にして、間隔をあけたいので

親要素に、flex-wrap:wrap 折返し設定(初期値 nowrap)

子要素に、flex-basis　子のベース幅(初期値 auto)を設定。

親子間違いを早速起こしていたので厳重注意…

このような結果になりました。

子要素の幅が30%なので右端に10%分の余白ができていますね。

親要素に、justify-content:space-between; を追加。

「space-between」は左右なし均等な余白、左右に余白ありの場合は「space-around」を使います。

（【忘備】ちなみに上下中央にする場合は親要素にalign-items: center;で可能です。）

一昔前の感覚だとここから左右はみ出させて調整ーとかあれだけ苦労していた左右一杯幅の均等配置が一発でできるように……やっぱり時代の流れってすごい。

ちなみにほぼ全ての主要ブラウザに対応しているんだとか。もうCSS3にビクつく時代は終わったんですね…

最終更新：2020.05.25