creatersnest

【CSS】flexboxでフレキシブルなレイアウトを実現させよう!


css3で新しく追加されたflexboxという機能。
これまで、要素を配列する作業に苦労してきた方も多いのではないでしょうか。
今回は、 フレキシブルなレイアウトを簡単に実現できるとても便利なflexboxに
ついてご説明していきます。

flexboxとは

flexboxは、flexコンテナの親要素とflexアイテムと呼ばれる複数の子要素で構成
されます。
flexboxを指定することによって、  親ボックスに内包される子ボックスを水平や
垂直にレイアウトすることが可能になります。

 

下の図は、flexboxを指定する前の配列です。

gnav_base

これに、flexboxを指定すると下の図のような配列にすることが可能になります。

flex

 

flexboxの書き方

それでは、サンプルを使用して書き方を見ていきましょう。

 

親要素・子要素を定義する

まず、親要素と子要素が定義していきます。

<HTMLサンプル>

<CSSサンプル>

以上です。とても簡単ですね。

 

ボックスの配列方向を指定する

次に、ボックスを水平・垂直どちらの配列にするかを指定していきます。
指定可能な値は以下の4つです。

 

row:初期値です。左から右へ水平方向に配置されます。

配列row

row-reverse:右から左へ水平方向に配置されます。

配列row-reserve

column:上から下へ垂直方向に配置されます。

配列column

column-reverse:下から上へ垂直方向に配置されます。

配列column-reserve

 

水平方向の位置を指定する

次に、水平方向のボックスの位置を指定していきます。

指定可能な値は以下の5つです。

 

flex-start : 初期値です。左詰めで配置されます。

flex

center: 中央詰めで配置されます。

center

flex-end : 右詰めで配置されます。

flex-end

space-between : 先頭と末尾を詰めて、全体へ均等に配置されます。

space-between

space-around :先頭と末尾にスペースを入れて、ボックス全体へ均等に配置されます。

space-around

 

垂直方向の位置を指定する

次に、垂直方向のボックスの位置を指定していきます。

指定可能な値は以下の5つです。

 

stretch: 初期値です。コンテナ全体へ均等に配置されます。

垂直位置strech

 

flex-start: 上辺を基準に配置されます。

垂直位置flexstart

center : 中央を基準に配置されます。

垂直位置center

flex-end: 下辺を基準に配置されます。

垂直位置flexend

baseline: ベースラインを基準に配置されます。

垂直位置baseline

対応ブラウザの種類

flexboxに対応可能なブラウザです。

・Chrome:4~28(-webkit-)
・Chrome:29
・Firefox :2~21(-moz-)
・Firefox :22
・IE:10(-ms-)
・IE:11
・Safari:3.1~6.1 (-webkit-)
・Android:2.1~4.3(-webkit-)
・Android:4.4(-webkit-)
・iOS:3.2~7.0(-webkit-)

 

まとめ

いかがでしたでしょうか。
flexbox 使用することでフレキシブルレイアウトがこれまでよりも簡単にできるよう
になりました。
モダンブラウザでの利用になりますが、ぜひ、使いこなしていきたい技術ですね。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Articleあまり知られてないけど実は便利なCSSセレクタまとめ