LogoMark.png

CSS/Flexbox

CSS|Flexbox


Flexboxとは柔軟なレイアウトを実現できるCSS3のレイアウトモジュールです。複雑なレイアウトを少ないコードで実装することができます。例えば、サイトナビゲーションメニューを横に並べる場合、float プロパティを使うよりも Flexbox を使う方が簡単にそれを実現できます。

仕様の変更、ブラウザの未対応など、これまで不安要素があったのですが、2018年現在では Firefox、Chrome、Safar、いずれもベンダープレフィックス無しで、大半のプロパティーを正しく認識するようになっています。


Flexboxの仕様

Flexbox の考え方を一言でまとめると、以下のようになります。

親要素(Flexコンテナ) に display: flex; を設定すると
子要素(Flexアイテム) の 並び(縦・横)や順序(上下・左右)について、
様々なプロパティを設定しつつ自由にレイアウトできる

以下、メニューを横に並べる・・という簡単な事例です。

一般的には、以下のようにコンテナとアイテムを Classで定義します。

モバイルサイズではメニューを flex-direction: column; 、PCサイズの場合は flex-direction: row;  といった使い方で、レスポンシブデザインも簡単です。


Flexコンテナのプロパティー

コンテナとなるボックスに指定するプロパティ

Flexアイテムのプロパティー

Flexアイテムの幅について

以下の例では、BOXが2つ横に2:1の比率で並びます。

<div class="flex-container">
  <div class="flex-a">
    <p>BOX-A</p>
  </div>
  <div class="flex-b">
    <p>BOX-B</p>
  </div>
</div>
.flex-container{  display: flex; width:960px; } 
.flex-a { flex-grow: 2;  }
.flex-b { flex-grow: 1;  }


flex-basisが定義されている場合、2つのブロック幅は以下のようになります。

Aの幅 = Aのbasis値 + ( 2 × ( 960px – ABのbasis合計)  ÷  ( 2+1 ) )
Bの幅 = Bのbasis値 + ( 1 x ( 960px – ABのbasis合計)  ÷  ( 2+1 ) )


flex-basisが0であれば話はシンプルで、以下のように単純に2:1になります。

Aの幅 = 0 + ( 2 × ( 960px – 0 ) ÷ ( 2+1 ) ) = 640px
Bの幅 = 0 + ( 1 × ( 960px – 0 ) ÷ ( 2+1 ) ) = 320px


ちなみに flex というショートバンドで、{ flex: 2; } と書いた場合、flex-grow は 2 に、flex-basis は 0 となります。よって、以下のように書くだけでも、2つのアイテム幅は2:1になります。

.flex-container { display: flex; }
.flex-a { flex: 2; }
.flex-b { flex: 1; }


Flexアイテムがはみ出す問題について

Flexアイテムには、width: 70%; などと指定しても、大きな画像や、英文がはみ出す・・という問題があります。

width:700px; という明示的な幅指定があれば、内容がはみだすことはありあせんが、width: 70%; と書くと、サイズが明示的ではないので、内容にそれより大きな画像があるとはみ出す・・ということになるようです。

フレキシブルにしたいということは、明示的なサイズは書きたくないわけで、ではどうすれば?・・ということになるのですが、答えは以下。

Flex アイテムが水平方向に並ぶ場合の最小幅は、アイテムの内容の最小幅または Flex アイテムに width プロパティで明示的に指定された幅などのうち、最も小さい値が選択される。つまり、Flex アイテムの幅はそこまでは縮むことができる・・ということです。よって、実質的にレイアウトに影響のない、min-widthの方に以下のような明示的な指定を行って、そこまでは縮んでもいい・・ということにすれば解決します。

min-width: 100px; 

逆説的でややこしいのですが、現状そうなるようです。



Flexbox サンプル1 → DEMO

header、nav ul、main の3箇所がFlexコンテナになっています。

サンプル2 → DEMO

メディアクエリーを使わずに Flexbox のみでスマホに対応させる事例です。以下、フレキシブルに横と縦を切り替える <article> 部分のみを掲載します。全体像はDEMOページから辿ってご覧下さい。






PAGES

GUIDE

TOOL

DATA

Last-modified: 2019-07-05 (金) 20:51:11