こんにちは！フォトグラファー&Web制作のじゅんぺい（@junpei_sugiyama）です！
今回はサイト制作の勉強を始めたばかりの人で、
どうやって要素を横並びにしたらいいんだろう？
といった方に対する記事となります。
今回の内容は初歩的ですが実務でも非常によく使う実践的な内容になっているので、まだ使ったことがないという人は必見です！
目次
要素を横並びにする方法
今回ご紹介するのはFlexboxですが、要素を横並びにする方法は他にもあります。
- Grid Layout
- inline-block
- table-cell
- float
これだけ色々な種類がありますが、要素を横並びにするという目的であればFlexboxを覚えておけば99%大丈夫だと思います。
また横並びにするだけでなく、揃える向きなども簡単に変えられるので、その中でもよく使う物を中心に書いていきます。
勉強始めたばかりのころは横並びにするだけで苦戦した思い出があります(^^;
Flexboxの基本的な使い方
Web制作の勉強を始めた当初買った本は横並びのやり方がfloatだったのでかなり苦戦しました。
しかしFlexboxを使うと非常に簡単に横並びにすることが出来ます。
ちなみに有名なプログラミングのオンライン教材であるProgateでも勉強出来ます（自分がやってた頃はありませんでした）
まずはヘッダーメニューから作っていくと思いますので、Flexboxを使わない場合のヘッダーメニューを想定してみます。
まずは基本となるHTMLから
<nav> <ul class="menu"> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 2</a></li> <li><a href="#">メニュー 3</a></li> <li><a href="#">メニュー 4</a></li> </ul> </nav>
次はCSS
.menu a {
background: #1bb4d3;
color: #fff;
display: inline-block;
margin: 10px;
text-decoration: none;
padding: 20px;
}
するとこのように縦並びになります。
See the Pen
メニューの縦並び by junpei (@junpei-sugiyama)
on CodePen.
縦並びで使いたいならもちろんこのままでいいのですが、今回は横並びのヘッダーメニューを想定しているので、これを横並びにしたいと思います。
それにはどうすればいいかというと、CSSにこれを追加するだけでOKです。
.menu {
display: flex;
}
横並びにしたい要素を囲っている親要素にdisplay: flex;とするだけです。
See the Pen
メニューの横並び by junpei (@junpei-sugiyama)
on CodePen.
それでは次からこのdisplay: flex;を書いた状態で、色々なプロパティを追加してみましょう。
※見やすくなるように要素間の余白など適宜変えています。
flex-direction（子要素の並ぶ向き）
まずは先ほどの親要素にdisplay: flex;を書いただけの状態を見て下さい。
See the Pen
flex-direction（子要素の並ぶ向き） by junpei (@junpei-sugiyama)
on CodePen.
この状態ではflex-directionは書いていませんが、初期値でflex-direction: row;となっています。
初期値なので書いても書かなくても同じなので書いていません。
この場合は左から並びます。
flex-direction: row-reverce;（右から並ぶ）
先ほどの状態はデフォルトのflex-direction: row;となり左から並んでいたので、
今度はflex-direction: row-reverce;として右から並べてみます。
flex-directionはdisplay: flex;と同じ親要素に書きます（下のCSSをクリックして下さい）
See the Pen
flex-direction: row-reverse; by junpei (@junpei-sugiyama)
on CodePen.
番号が右からになっただけでなく、親要素全体が右端に寄ったのが分かりますね。
ただこれはあまり使わないですね。
良く使うのは次になります。
flex-direction: column;（上から並ぶ）
次は上から縦並びにします。
縦並びにするにはflex-direction: column;と書きます。
See the Pen
flex-direction：column; by junpei (@junpei-sugiyama)
on CodePen.
ここでお気付きの人がいるかも知れませんが、縦並びにするなら最初からdisplay: flex;を書かなければいいんじゃないかと思うかも知れません。
確かにそうなのですが、PCサイズでは横並びして、スマホサイズでは縦並びにしたい時などに使います。
そうすると今度はPCサイズだけ横並びにするように書けばいいんじゃないかと思うかも知れません。
もちろんそうすることも出来るんですが、そうするとスマホサイズで要素を中央にするalign-items: center;とか使えなくなったり、結局他のコードが増えるだけなので自分の場合はどちらもdisplay: flex;を使う事が多いです。
flex-direction: column-reverse;（下から並ぶ）
これはあまり使いませんが、一応紹介しておきます。
なんとなく想像できるかも知れませんが、次のようになります。
See the Pen
flex-direction: column-reverse;（下から並ぶ） by junpei (@junpei-sugiyama)
on CodePen.
justify-content（水平方向の揃える位置）
次は水平方向の揃える位置を変えられるjustify-contentです。
これは非常に良く使います。
まずは初期値であるjustify-content: flex-start;から見てみます。
See the Pen
flex-direction：row； by junpei (@junpei-sugiyama)
on CodePen.
初期値はflex-directionの初期値と見た目は同じですね。
これもjustify-content: flex-start;と書いても書かなくても同じなので書いていません。
justify-contentの初期値は水平方向で左揃えとなります。
justify-content: flex-end;（右揃え）
使う頻度は少ないかも知れませんが、右揃えにしたい時はjustify-content: flex-end;と書きます。
See the Pen
justify-content: flex-end;（右揃え） by junpei (@junpei-sugiyama)
on CodePen.
flex-direction: row-reverce;と似ているように見えますが、右揃えになっただけで番号の順番は変わっていません。
justify-content: center;（中央揃え）
これは非常に良く使います。
See the Pen
justify-content: center;（中央揃え） by junpei (@junpei-sugiyama)
on CodePen.
要素を中央に持ってくるやり方も色々ありますが、Flexboxの場合はこれだけでOKです。
justify-content: space-between;
これもjustify-content: center;の次によく使います。
言葉にすると少し難しいんですが、最初の要素を左端、最後の要素を右端、そしてその他の要素同士の余白が均等になるような配置となります。
まぁ見ればすぐ分かると思います。
See the Pen
justify-content: space-between; by junpei (@junpei-sugiyama)
on CodePen.
justify-content: space-around;
これはあまり使いませんが、justify-content: space-between;と似ています。
See the Pen
justify-content: space-around; by junpei (@junpei-sugiyama)
on CodePen.
justify-content: space-between;が最初と最後の要素が両端にあるのに対して、こちらは両端に余白があります。
この余白は自分で決められないので、カンプ通りにしたい時など融通が利きません。
align-items（垂直方向の揃える位置）
今度は水平方向ではなく、垂直方向の揃える位置を決めるalign-itemsです。
まずは初期値であるalign-items: stretch;から見てみます。
今回は垂直方向の揃えを確認するために、要素のサイズと数字の位置をバラバラにしました。
See the Pen
align-items by junpei (@junpei-sugiyama)
on CodePen.
これも初期値なので書いていません。
初期値では上揃えとなります。
align-items: flex-end;（下揃え）
初期値では上揃えなので、下揃えにしてみたいと思います。
See the Pen
align-items: flex-end; by junpei (@junpei-sugiyama)
on CodePen.
これは分かりやすいと思いますが、あまり使う機会はないと思います。
align-items: center;（中央揃え）
align-itemsではこれが一番よく使うと思います。
See the Pen
align-items: center;（中央揃え） by junpei (@junpei-sugiyama)
on CodePen.
要素が中央になりました。
大きさの違う具材を真ん中に刺すバーべーキューやおでんのイメージです。
align-items: baseline;
これは使う機会が少ないと思います。
See the Pen
align-items: baseline; by junpei (@junpei-sugiyama)
on CodePen.
要素の中身であるベースラインが一直線になるように揃いました。
そもそもこのようにベースラインがバラバラであることが少ないと思います。
flex-wrap（子要素の折り返し）
次は子要素の折り返しです。
これは画面の幅を狭くしていった時、自動で折り返すかどうかを決めるものです。
まずは初期値であるflex-wrap: nowrap;を見てみます。
See the Pen
flex-wrap by junpei (@junpei-sugiyama)
on CodePen.
画面の幅を超えて横にスクロールとなりました。
flex-wrap: wrap;
今度は画面幅によって折り返すようにしてみます。
See the Pen
flex-wrap: wrap; by junpei (@junpei-sugiyama)
on CodePen.
今度は横スクロールにならず、下に折り返したのが分かります。
パソコンでこのブログを見ている場合は、さらに上のCSSをクリックすると分かりやすいかと思います。
これはレスポンシブでよく使いますので、覚えておくようにしましょう。
まとめ
今回はFlexboxの親要素に対する設定について書きました。
子要素に対する設定もあるんですが、使う機会が少ないので別の記事で書くかも知れません。
またよく使うものをご紹介というタイトルでありながら使用頻度の低いものもサラッと書きましたが、それも知っておくと全体の理解が深まると思います（全く書いていないものもあります）
その中でよく使う物は以下になります。
- flex-direction: column;
- justify-content: center;
- justify-content: space-between;
- align-items: center;
- flex-wrap: wrap;
あとはこちらのWebクリエイターボックスさんでFlexboxのチートシートが配布されているので、ぜひ印刷して手元に置いておくと作業が捗ると思います（最初の内はなかなか覚えられないと思うので）
Flexboxについてはまだ書きたい事があるので、また別の記事で書きたいと思います。
以上です。