flexbox（display:flex）を使ったボックスレイアウト：css Tips9
前回は、レスポンシブウェブデザインまとめにつきまして、モバイルファーストの考え方の重要性および作成時の注意などを記載いたしました。
レスポンシブウェブデザインを作成するにあたり、まだまだ実践的なTips的な内容が不足していると思いますので、今回よりTips的な記事を記載していこうと思います。
まずはCSS3のflexbox;、3カラムのリキッドレイアウトを実装するには、CSS2まではdiv要素を入れ子にし、floatとネガティブマージンを組み合わせて実装する必要がありました。しかし、CSS3のflexboxを使えば、floatよりも柔軟に対応できるようになります。
という事で、それでは今回はッ、
・ベースとなるHTMLとCSS
・flexboxで3カラムレイアウト
・画面幅に合わせて3カラムから2カラムへ
上記について記載していこうと思います…。
flexboxの概要
カラムをレイアウトするために、以前であればfloatプロパティを使う方法が一般的でしたが、floatした要素の高さが揃わなかったり、floatをわざわざ解除する必要があるなど、不便に感じることが多くあることと思います。
そもそもの原因は、floatはもともと段組みをするためのプロパティではないからに他なりません。
floatの代わりに、CSS3で導入されたflexboxを使えば、簡単にカラムをレイアウトできるようになります。
floatレイアウトとflexboxの違い
| 比較内容 | float | flexbox |
|---|---|---|
| コンテナとなる親要素の高さ | 子要素の高さは無視される | 子要素の高さが含まれる |
| 子要素の高さが異なる場合 | 個々のボックスが独立した高さを持ち、揃えることはできない | 一番高いボックスに合わせて高さが揃う |
| 後に続く要素絵の影響 | float解除を行わないと、後の要素に影響 | 影響なし |
| 要素の順番変更 | ある程度は可能だが制限有 | 自由に変更可能 |
| 固定幅＋リキッドレイアウトを組む | 要素の複雑な入れ子とネガティブマージンを駆使すれば可能 | プロパティを1行書くだけで可能 |
ベースとなるHTMLとCSS
下記のような左右のカラムが固定幅で、中央のカラムがリキッドとなる3カラムレイアウトをflexbox（display:flex）を使って実装していきます。
ベースとなるHTMLはシンプルに記述します。順番はあとから自由に変えられるため、メインカラムを先頭に記述します。CSSでは、サブカラムとエキストラカラムの幅と、各カラムの背景色を指定します。この時点では、それぞれのカラムは縦に並ぶことになります。
| <article id=”contents”> |
| <section id=”main”><!–メインカラム–></section> |
| <section id=”sub”><!–サブカラム–></section> |
| <section id=”extra”><!–エキストラカラム–></section> |
| </article> |
| #contents {width: 100%;} |
| #main {background: #fff;} |
| #sub {width: 150px;padding: 10px;background: #4c5482;} |
| #extra {width: 200px;padding: 10px;background: #eee;} |
■この時点では、各カラムが縦に並んだ状態です。
flexboxで3カラムレイアウト
各カラムを横に並べたレイアウトにするには、コンテナとなる親要素に対して、display:flex;を指定するだけです。親要素の直下にある兄弟要素が横に並び、それぞれのカラムの高さが揃います。
| #contents { |
| display: flex; |
| width: 100%; |
| } |
次に、親要素の幅に合わせて、メインカラムの横幅が変わるようにします。flexプロパティを使い、flex:の後に指定する数字を「1」と指定することで、親要素に合わせて幅を伸縮させることができます。
※flexは、CSSの一括指定プロパティで、フレックスアイテムをフレックスコンテナーの領域に収めるために、どのように伸長・収縮させるかを指定します。
| #main { |
| flex:1; |
| background: #fff; |
| } |
次に、左から2番目にあるカラムを1番目に変更します。カラムの表示順を変更するには、orderプロパティを使います。プロパティの値にはそれぞれ、表示させたい順番を指定します。ここでは、1：サブカラム、2：メインカラム、3：エキストラカラムの順で指定しています。
| #main { |
| order: 2; |
| flex: 1; |
| background: #fff; |
| } |
| #sub { |
| order: 1; |
| width: 150px; |
| padding: 10px; |
| background: #4c5482; |
| } |
| #extra { |
| order: 3; |
| width: 200px; |
| padding: 10px; |
| background: #eee; |
| } |
画面幅に合わせて3カラムから2カラムへ
次に、画面サイズに応じてレイアウトが変わるようにして、どの画面サイズでも見やすくなるよう調整してみます。例として、ブラウザサイズ800px以下の場合は、エキストラカラムを非表示にして、メインカラムを広くとれるようにしてみます。
画面サイズによって異なるスタイルを指定するには、CSS3のメディアクエリを使用します。メディアクエリにはいくつか指定方法がございますが、今回はCSSファイルに記載する方法をサンプルとして記載します。@media screen and(max-width:800px)とすることで、「画面サイズが800px以下の場合に処理をする」という意味合いになります。
| @media screen and(max-width:800px){ |
| #extra{ display: none; } |
| } |
それでは、下記にメディアクエリのリンクを記載しておきます。
という事で今回は、flexbox（display:flex）を使ったボックスレイアウトにつきまして、Tips的に記載してみました。
display:flexを使用したボックスレイアウト、非常に便利です。しかしながら、思った以上に複雑でflexboxのプロパティも実は沢山ございます。また、別の記事でflexboxを詳しく記載してみようと思います。
レイアウトを作成する方法は他にもCSS Grid Layoutや、inline-blockを使用する方法などがありますが、細かい所を自動で調整してくれたり、簡単にレイアウトを作成することができるというFlexboxの特徴から使用頻度が高くなります。
とりあえず、今回はここまで…。
お仕事のご依頼は↓コチラより…、それではまた次回…。
- 投稿タグ
- Tips, CSS3, flexbox, display:flex
