コーディングを始めたばかりの頃は要素を横並びにするのに苦戦すると思います。
今回の内容は初歩的ですが実務でも非常によく使う実践的な内容になっているので、まだ使ったことがないという人は必見です！
CSSで要素を横並びにする様々な方法
今回ご紹介するのは『Flexbox』ですが、要素を横並びにする方法は他にもあります。
- Grid Layout
- inline-block
- table-cell
- float
これだけ色々な種類がありますが、要素を横並びにするという目的であればFlexboxを覚えておけば99%大丈夫だと思います。
また横並びにするだけでなく揃える向きなども簡単に変えられるので、その中でもよく使う物を中心に書いていきます。
勉強始めたばかりのころは横並びにするだけで苦戦した思い出があります(^^;
横並びレイアウトの定番『Flexbox』の基本的な使い方
Web制作の勉強を始めた当初買った本は、横並びのやり方が『float』だったのでかなり苦戦しました。
しかし、Flexboxを使うと非常に簡単に横並びにすることが出来ます。
ちなみに有名なプログラミングのオンラインサービスのProgateでも勉強出来ます（自分が使っていた頃はFlexboxはありませんでした）
コーディングではまずヘッダーメニューから作っていくことが多いと思うので、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.
縦並びで使いたいならこのままでいいのですが、今回は横並びのヘッダーメニューを想定しているのでこれを横並びにしたいと思います。
それにはどうすればいいかというと、横並びにしたい要素を囲っている親要素にdisplay: flex;とするだけです。
.menu {
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;と同じ要素に書きます。
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;をdisplay: block;にすればいいだけですね。
flex-direction: column-reverse;（下から並ぶ）
なんとなく想像できるかも知れませんが、次のようになります。
See the Pen
flex-direction: column-reverse;（下から並ぶ） by junpei (@junpei-sugiyama)
on CodePen.
これの使い道ですが、例えばHTMLが以下の場合。
<div class="sample">
<h2 class="sample-title">セクションタイトル</h2>
<div class="sample-img">
<img src="画像パス" alt="" />
</div>
</div>HTMLでは『タイトル → 画像』という順番ですが、デザインでは『画像 → タイトル』という順番になっているとします（実際よくあります）
この場合、CSSは以下のようにすればタイトルと画像の並び順が逆になり、デザイン通りになります。
.sample {
display: flex;
flex-direction: column-reverse;
}ここで、
と思うかも知れません。
確かにHTMLで順番を変えればCSSを書く必要はありませんが、HTMLの構造的に『画像 → タイトル』という順番は個人的には変だと思うので、コードの記述量より構造を重視しています。
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;
これもよく使うかも知れません。
これは全ての要素を横いっぱいに広げて等間隔で配置することが出来ます。
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;（下揃え）
初期値では上揃えなので、align-items: flex-end;で下揃えにしてみたいと思います。
See the Pen
align-items: flex-end; by junpei (@junpei-sugiyama)
on CodePen.
align-items: center;（中央揃え）
『align-items』ではこのalign-items: center;が一番よく使うと思います。
See the Pen
align-items: center;（中央揃え） by junpei (@junpei-sugiyama)
on CodePen.
要素が中央になりました。
大きさの違う具材を真ん中に刺すバーべーキューやおでんのイメージです。
align-items: baseline;
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.
今度は横スクロールにならず、下に折り返したのが分かります。
パソコンでこのブログを見ている場合は、さらに上のHTMLかCSSをクリックすると分かりやすいかと思います。
これはレスポンシブでよく使いますので、覚えておくようにしましょう。
まとめ
今回はFlexboxの様々なプロパティについて解説しました。
子要素に対する設定もあるんですが、使う機会が少ないので別の記事で書くか、今後この記事に追記するかも知れません。
あとはWebクリエイターボックスさんでFlexboxのチートシートが配布されているので、ぜひ印刷して手元に置いておくと作業が捗ると思います（最初の内はなかなか覚えられないと思うので）
日本語対応！CSS Flexboxのチートシートを作ったので配布します | Webクリエイターボックス
以上になります。
- コピペで使えるWordPressの各テンプレート
- 実務でよく使う見出し一覧
- 実務でよく使うテキストのhoverアニメーション
- 実務でよく使うボタン内の矢印9種類
- Contact Form 7の色々・・・
2023年12月31日まで！5大無料特典あり🎁
