CSSで要素を横並びにするイマドキの手法

モノづくり部のなんちゃってデザイナー、おさくです！

エンジニア修行中でヘタレな私がこの部で唯一ドヤァできるのは CSS ぐらいなので、今回は私の大好きな Flexbox のすげぇや！な部分を書き殴ってみようと思います。

Flexboxって？

CSS3で追加された新機能です。
以前は要素を横並びにする際は float で制御していましたが、Flexboxを使えば驚くほど簡単に要素の配置ができるんです！ステキ！
floatを使用すると後からclearをする必要がありますがそれも不要です。そう、Flexboxならね。

あれしたいこれしたいを叶えてくれる

例えば……
このボタン横並びにしたいんだよねー。均等に間隔あけて綺麗に並べといてー。あ、もしかしたら来月以降ボタン増えるかもしれないから、なんかいい感じになるようにお願いネ☆
という指示があった場合。

floatを使うと……

ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
li{
  background: #badcf7;
  border: solid 1px #9aaace;
  box-sizing: border-box;
  float: left;
  width: 25%;
  padding: 15px 0;
  text-align: center;
}
.box{
  border: 1px solid #333;
  background: #ccc;
  margin-top: 20px;
}

（あ、margin-topが効いてない……clearしなきゃ……ああclearfix作ってない……要素が増えたら横幅も変えなきゃ……）

Flexboxならこう！

ul{
  list-style: none;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 0;
}
li{
  background: #badcf7;
  border: solid 1px #9aaace;
  box-sizing: border-box;
  padding: 15px 0;
  text-align: center;
  flex-grow: 1;
}
.box{
  border: 1px solid #333;
  background: #ccc;
  margin-top: 20px;
}

完璧！！

やることは簡単です。

１．親要素である ul に display: flex; を追加する。
２．justify-content で等間隔に並べるよう設定。
３．子要素の li に flex-grow を追加し、要素の大きさが全て均等になるよう配置

素晴らしいですね！

他にもいろんな我儘を聞いてくれます！
あまりにもいろいろ聞いてくれるジェントルマンすぎて紹介しきれないので私が主によく使うプロパティだけをいくつか書き残しておこうと思います。

要素をいい感じに並ばせたい！

そんな貴方に justify-content
先ほど出てきたのは space-between でしたね。 親要素に設定します。

上から space-between、space-around、flex-end、flex-start の順に並んでいます。
space-between は等間隔に並ばせたい時に使用します。
space-around は左右のマージンを含めて等間隔。
flex-end と flex-start はご覧の通りです。

上寄せ下寄せベースライン自由に揃えたい！

そんな欲張りさんには align-items
こちらも親要素に設定してあげましょう。

上から stretch、flex-start、flex-end、baseline です。

複数行で要素を配置したい！

そんな悩める貴方には flex-wrap

上から nowrap、wrap、wrap-reverse です。
listに横幅を設定しているのですが、nowrap の場合は意地でも折り返しません。
どんなに横幅を縮められても要素を押し込みます。
が、wrap だと限界がきたら素直に折り返してくれます。
ちなみに画面サイズを縮めるとそれに合わせて綺麗に折り返してくれます。お利口さん。
wrap-reverse で逆に配置も可能です。

他にもたくさんのプロパティがありますので是非いろいろ試してみてくださいね！