coder's log

[CSS]flexboxを使った真ん中表示

公開日：2019/10/27

メジャーブラウザ最新版に関して言えば、ほぼflexbox対応になったんじゃないかなぁ（多少のバグはしらんけど）と思う今日このごろ。
floatで横並びレイアウトとかやってたのが懐かしいなんて思っちゃいそうですが、たまに古いブラウザもサポート対象になっているwebサイトの更新作業に出くわしたりするので、忘れないようにしなくっちゃ！と密かに心に誓っていたり。

でもせっかくなので、flexboxの小技的なものとして、上下左右真ん中と横並びレイアウトで上下真ん中と＋αをご紹介します。

まずは困ったときのチートシート＆ジェネレーター

本当にありがたい！これがあってよかった！お世話になっている方々もたくさんいらっしゃるはず！

• 日本語対応！CSS Flexboxのチートシートを作ったので配布します - Webクリエイターボックス

頼りっぱなしだといろいろ忘れそうだし、なんだかんだ言ってひとそれぞれよく使うパターンというのがあって、すっかり憶えてしまったりするので意外と使わないのですが、困ったときに助かるのがジェネレーターさんです。

• FLEX LAYOUT GENERATOR - suiq
• Flexy Boxes - pete_b.
• Flexboxを使ったページのレイアウトから要素の配置まで、レスポンシブ対応のコードが生成できるツール -Flexible Boxes - coliss

上下左右真ん中

普通にflexboxのあれやこれやを使っているだけなので、「小技」と言うにはおこがましい感じですが、親要素に以下のようなcssを設定するだけです。

display: flex;
justify-content: center;
align-items: center;

なお、上の例では子要素にtext-align:centerを入れています。

以下のリンク先が詳しいので、参考にしてください。

• flexboxで上下左右中央揃え - Qiita @junara
• 上下中央揃えのCSSまとめ Flexboxがたった3行で最も手軽 - ICS MEDIA

特定のエリア（ボックス）内における上下左右真ん中表示の方法はflexbox以外にもいろいろあります。
私もそうですが、tableレイアウトの頃から制作やってるといろいろなパターンにお世話になっていますよね！

• 【CSS】画像やテキストを縦横中央に配置する方法4つ - WEBDESIGNDAY
• CSSで要素を上下や左右から中央寄せする7つの方法 - 株式会社グランフェアズ
• [CSS]要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ - coliss
• テキストの縦方向の中央揃えについて - Qiita @Shinji-m
• CSSで上下・左右に中央寄せする方法、全部まとめ - WWWクリエイターズ

もっと古いコードになるとtableレイアウトを使ったパターンとかでしょうか・・・。何を選択するかは携わるwebサイトのサポート対象のweb環境（OSとかブラウザとかのバージョンと組み合わせ）によるかと思います。うっかり古いブラウザもサポート対象になっていると、flexboxとか使えなかったりします・・・。
そういった制約の中で、できるだけ短いコードで、運用・管理が手間にならないものを選択していくとよいのではないかな？
たとえば、自分以外のコーダーがかなりな勢いで初心者ばかりの職場であるとか、自分は雛形だけ作って、実際の運用は昔html研修を1日受けたくらいの総務の人がやるよといったの場合、意外と古い書き方のほうが喜ばれたりします。

画像とテキストの左右振り分けレイアウトで上下真ん中

コンテンツは画像とテキストにこだわらなくても良いんですがね。

ここにコンテンツ

『万葉集』巻五「梅花歌三十二首并序」

天平二年正月十三日、萃于帥老之宅、申宴會也。于時、初春令月、氣淑風和、梅披鏡前之粉、蘭薫珮後之香。加以、曙嶺移雲、松掛羅而傾蓋、夕岫結霧、鳥封縠而迷林。庭舞新蝶、空歸故鴈。於是蓋天坐地、促膝飛觴。忘言一室之裏、開衿煙霞之外。淡然自放、快然自足。若非翰苑、何以攄情。請紀落梅之篇。古今夫何異矣。宜賦園梅聊成短詠。

天平二年正月十三日に、帥老の宅に萃りて、宴會を申ぶ。時に、初春の令月にして、氣淑く風和ぎ、梅は鏡前の粉を披き、 蘭は珮後の香を薫す。＜以下略＞

• 画像とテキストは以下を参照。画像の使用はリンク先の利用規約に従ってください。

• かわいいフリー素材集 いらすとや
• 万葉集巻第五「梅花謌卅二首 幷序」の序 - 小さな資料室
• 令和の由来『万葉集 梅花の歌三十二首并せて序』の現代語訳・意味とその解説 - マナペディア

<div class="flex">
    <img src="画像ファイルのパス" alt="画像の内容">
    <p>テキスト</p>
</div>

htmlはこんな構造になっています。要素はdivやp以外も使用できます。
親要素のclass[flex]を以下のように設定すれば、テキスト量や画像のサイズに関わらず、上下真ん中に表示されます。

display: flex;
align-items: center;

ちなみに子要素にはwidthを設定しています。

もちろん、このようなレイアウトを実現する手段はflexboxに拘る必要はありません。例えばdisplay: table-cellとvertical-align: middleを使った方法などもあります。

• cssで縦方向中央に配置する方法（5つのケース＋1） - バシャログ。

ところで、真ん中表示の話からずれますが、このような構成でflexboxを使ったとき、下のように画像の縦横比率がおかしくなったことはないでしょうか。

『万葉集』巻五「梅花歌三十二首并序」

天平二年正月十三日、萃于帥老之宅、申宴會也。于時、初春令月、氣淑風和、梅披鏡前之粉、蘭薫珮後之香。加以、曙嶺移雲、松掛羅而傾蓋、夕岫結霧、鳥封縠而迷林。庭舞新蝶、空歸故鴈。於是蓋天坐地、促膝飛觴。忘言一室之裏、開衿煙霞之外。淡然自放、快然自足。若非翰苑、何以攄情。請紀落梅之篇。古今夫何異矣。宜賦園梅聊成短詠。

天平二年正月十三日に、帥老の宅に萃りて、宴會を申ぶ。時に、初春の令月にして、氣淑く風和ぎ、梅は鏡前の粉を披き、 蘭は珮後の香を薫す。＜以下略＞

これはflexboxのalign-itemsの初期値がstretchであるために起こる現象で、align-itemsを設定していないと起こります。適宜、align-itemsを設定すれば解消されますが、imgタグをdivタグなどで囲んでも解消されます（この場合はwidthをimgを囲んだdivタグの方に設定します）。

もう一つおまけですが、下の例ではalign-itemsにflex-startを設定してあります。
これをモバイル環境（「コーダー日誌」ではディスプレイサイズの幅が1023px以下）でみると、レイアウトが変わります。

もう一つおまけですが、下の例をPC環境（「コーダー日誌」ではウィンドウサイズの幅が1024px以上）でみると、レイアウトが変わります。

• モバイル環境でレイアウトを変える話とalign-items:flex-startは直接関係ないですが、なお、うっかり画像サイズを元のサイズより大きく表示してしまうと（あまりないとは思いますが・・・）縦横比率がおかしくなるので、align-itemsは設定しておいたほうが良いです。

『万葉集』巻五「梅花歌三十二首并序」

天平二年正月十三日、萃于帥老之宅、申宴會也。于時、初春令月、氣淑風和、梅披鏡前之粉、蘭薫珮後之香。加以、曙嶺移雲、松掛羅而傾蓋、夕岫結霧、鳥封縠而迷林。庭舞新蝶、空歸故鴈。於是蓋天坐地、促膝飛觴。忘言一室之裏、開衿煙霞之外。淡然自放、快然自足。若非翰苑、何以攄情。請紀落梅之篇。古今夫何異矣。宜賦園梅聊成短詠。

天平二年正月十三日に、帥老の宅に萃りて、宴會を申ぶ。時に、初春の令月にして、氣淑く風和ぎ、梅は鏡前の粉を披き、 蘭は珮後の香を薫す。＜以下略＞

縦長の画面で見たときに、テキストと画像を左右に配置にしてあると画像が小さすぎるという事があると思います。
かと言って、レイアウトを変えずに画像の幅を広げると、テキスト部分が狭くなり文章がよみづらいということになったりします。

そういうときは、jsやメディアクエリなどを使って画面幅を判定して、縦長の画面（特定のウィンドウ幅）の場合はテキストと画像の配置を上下にすると良いかもしれません。
この例では、メディアクエリで画面幅を判定して親要素に以下のcssを追加しています。

flex-direction: column-reverse;

この例のように左右レイアウトの画像を左に配置した（htmlで画像要素を先に記述した）場合、上下レイアウトにするためにflex-directionをcolumnにすると、画像は上に表示されます。しかしデザインの都合上（画像より先にテキストに注目してほしいので）画像を下にしたい場合はcolumn-reverseを設定すると良いです。
ちなみに横並び配置（row）にもreverseがあるので、適宜使い分けると良いと思います。