【Web制作】Floatレイアウトを卒業するためのFlexboxのまとめ

2019/03/122019/04/12

スポンサードリンク

Flexboxを使っているWEBサイトが増えてきました。
ちょっと勉強しなくなると進化についていけなくなりますね。

まぐろ

Floatレイアウトでずっと行けるかな？

と淡い期待を持っていたのですが、実際Flexboｘが使われているサイトの修正をするとなると
勉強せざるをえません。

要素が重なってくると複雑になってしまうfloatレイアウトに対し
Flexboxは柔軟性があり、指定できるプロパティが多いのが特徴。
しっかりと調べてみるとFlexboxレイアウトはとてもわかりやすく簡単にレイアウトができることに気が付きました。
100％万能とは行きませんがFlexboxレイアウトを身に付けて作業効率をアップさせていきましょう。
この記事はFloatレイアウトを卒業するためのFlexboxのまとめです。

htmlで画面のレイアウトをするのには大きくわけて3つ。
Tableレイアウト・Floatレイアウト・Flexboxレイアウトの比較

それぞれのメリット・デメリット

■Tableレイアウト

tableタグをレイアウトに使うやり方。
ガッチガチに固定できるのでブラウザ間の違いが極めて少ない。
htmlソースが複雑になる。
昔（2000年ぐらい）はIE、NETSCAPE、FIREFOXの間でブラウザレンダリングの差が極端だったため
使われた方法。

■Floatレイアウト

CSSのdisplay:floatを使う方法。
tableレイアウトに比べレイアウト用のクラスを左右にふりわけておけば、htmlが格段に見やすくなる。
CSSを覚えないとだめ。
clearfixの技法を使うことでCSSの書き方が簡単になる。

■Flexbox

比較的新しいレイアウト技法であるためCSSのプロパティを覚えるまでが大変。
しかし柔軟性があり設定が簡単。
CSSの書き換えだけでレイアウト以外にも要素の並べ替え、折返し設定もできる。
htmlをとてもスリムにできる。

古いブラウザには対応していないが、WEBデザイナーにとって一番面倒なIE10がサポート終了のと
IE11のシェアが大分下がって来ているため、ターゲット層がほぼスマホユーザーである、IEが保守対象のブラウザから外れているなどであれば挑戦してみる価値はあり。

IE11のシェアは2019年1月で14.1％
WebブラウザシェアランキングTOP10(日本国内・世界) | ソフトウェアテスト・第三者検証ならウェブレッジ

Flexboxに対応しているブラウザはこちらで見られます。
Can I use… Support tables for HTML5, CSS3, etc

これからWEBデザイナーを目指す人の場合にはFlexboxレイアウトは必須になります。
たくさんある画面サイズのスマホ向けに対応するCSSコーディングを求められるため、
細かい調整を自動で行ってくれるFlexboxの方が楽になるからです。

一方、昔ながらのfloatを（もっと古いとtableレイアウト）のhtmlのまま
htmlの保守をして欲しいと言われるケースもありますのでfloatもそれなりに知っておく必要があります。

floatレイアウトである状態のhtmlソースをflexboxへ書き換えるのにも工数がかかってしまいますので、
短時間の低料金で終わらして欲しいと言われる場合にはfloatのソースを解読して調節することになります。

もしも、1からhtmlを組み上げていくのであれば2019年はflexboxをガンガン使っていって良いはずです。
使わないデメリットがありません。

Flexレイアウトの入門

基本：親要素と子要素

親要素にdisplay:flex;を書きます。
子要素は勝手に横ならびになります。
あとは子要素のサイズや並び方をCSSで指定していくだけでOK!
とても簡単です。

<div class="flex-wrapA">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

インライン要素として並べたい場合には
display: inline-flex;を指定します。

inline 1

inline 2

inline 3

inline 4

inline 5

<div class="flex-wrapA">
  <div>inline 1</div>
  <div>inline 2</div>
  <div>inline 3</div>
  <div>inline 4</div>
  <div>inline 5</div>
</div>

-webkit-flexのようなブラウザ専用プレフィックスはつけなくても動作します。（古めのブラウザに対応させるためにはプレフィックスは必要）

親要素と子要素を理解しておけばとても簡単です。

<div class="flex-wrap">
  <div class="yellow f-ch">1</div>
  <div class="bbox f-ch">2</div>
  <div class="cbox f-ch">3</div>
  <div class="dbox f-ch">4</div>
  <div class="ebox f-ch">5</div>
</div>

ulタグを使う場合

divだけでなくulタグもFlexを使うと,とても簡単に横並びにできます。

List1
List2
List3
List4
List5

<div id="flex-ul-wrap">
        <ul>
        <li>List1 </li>
        <li>List2 </li>
        <li>List3 </li>
        <li>List4 </li>
        <li>List5 </li>
    </ul>
</div>

Flexboxのレイアウト指定

並び方を決める「justify-content」

justify-contentでFlexboxの並べ方を指定します。
左寄せのflex-startがデフォルト値。

プロパティ	内容
flex-start	左寄せ
center	中央寄せ
flex-end	右寄せ
space-around	左端・右端の隙間を開けてflexboxを等間隔に配置
space-between	左端・右端の隙間をつめてflexboxを等間隔に配置

flex-end:右寄せ

<div class="flexWrapB">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

center:中央寄せ

<div class="flexWrapC">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

space-around:左端・右端の隙間を開けてflexboxを等間隔に配置

<div class="flexWrapSPA">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

space-between:左端・右端の隙間をつめてflexboxを等間隔に配置

<div class="flexWrapSBW">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

子要素の折返し配置「flex-wrap」

flex-wrap折返しをするかを指定します
デフォルト値は折返しなしで横一列に表示されるnowrap
wrapの場合でも横幅指定されていないと、横幅一列に並びます。

プロパティ	内容
nowrap	子要素を折返ししないで横一列に表示
wrap	子要素を折返して表示
wrap-reverse	子要素を折返して上下逆に表示

wrap:子要素を折返して表示

<div class="flexWrapWrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

wrap-reverse:子要素を折返して上下逆に表示

<div class="flexWrapWrapRe">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

並ぶ方向を決める「flex-direction」

flex-directionは子要素が並ぶ方向を決めます。
デフォルト値は左並びのrow

プロパティ	内容
row	子要素を左⇒右
row-reverse	子要素を右⇒左
column	子要素を上⇒下
column-reverse	子要素を下⇒上

row-reverse:子要素を右⇒左

<div class="flexDieRow-re">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

column 子要素を上⇒下

<div class="flexDieColumn">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

column-reverse: 子要素を下⇒上

<div class="flexDieColumn-re">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

align-items：垂直方向の並べ方を指定

align-itemsでは垂直方向の並べ方を指定
デフォルト値はstretch

プロパティ	内容
flex-start	親要素の開始位置に合わせる
flex-end	親要素の一番下から揃える
center	垂直方向に中央揃え
baseline	ベースラインで揃える

flex-start

align-items1

align-items2

align-items3

align-items4

align-items5

<div class="flexAlign flex">
  <div>align-items1</div>
  <div><br><br>align-items2</div>
  <div><br><br><br>align-items3<br><br><br></div>
  <div><br><br><br>align-items4<br><br><br><br></div>
  <div><br><br><br>align-items5<br><br><br><br><br></div>
</div>

flex-end

align-items1

align-items2

align-items3

align-items4

align-items5

<div class="flexAlignEnd flex">
  <div>align-items1<br><br><br></div>
  <div>align-items2</div>
  <div>align-items3<br><br><br></div>
  <div>align-items4<br><br><br><br></div>
  <div>align-items5<br><br><br><br><br></div>
</div>

center

align-items1

align-items2

align-items3

align-items4

align-items5

<div class="flexAlignCenter flex">
  <div>align-items1<br><br><br></div>
  <div>align-items2</div>
  <div>align-items3<br><br><br></div>
  <div>align-items4<br><br><br><br></div>
  <div>align-items5<br><br><br><br><br></div>
</div>

baseline

align-items1

align-items2

align-items3

align-items4

align-items5

<div class="flexAlignBL flex">
  <div>align-items1</div>
  <div><br><br>align-items2</div>
  <div><br><br><br>align-items3<br><br><br></div>
  <div><br><br><br>align-items4<br><br><br><br></div>
  <div><br><br><br>align-items5<br><br><br><br><br></div>
</div>

align-content：垂直方向の複数行をどう配置するかを指定

電卓やカレンダーのような要素の多い表を作る時に必要になるプロパティです。
設定の名前はjustify-contentと同様です。
flex-warp：nowrap(回り込み無効)にしているときにはflex-warpが優先されて無効扱いになります。

プロパティ	内容
stretch	親要素の高さに合わせる
flex-start	親要素の開始位置に合わせる
flex-end	親要素の終わり位置に合わせる
center	中央揃え
space-between	親要素の上下の隙間をなくす
space-around	親要素の上下の隙間をあける

flex-start

<div class="flexalingC-st flex2 wi-300">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

flex-end

<div class="flexalingC-end flex2 wi-300">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

center

<div class="flexalingC-C flex2 wi-300">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

space-between

<div class="flexalingSP-B flex2 wi-300">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

space-around

<div class="flexalingSP-A flex2 wi-300">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
</div>

flex-directionとflex-wrapを一度に指定できる「flex-flow」

なれてきたらflex-flowを使うとCSSの記述が減り見やすくなります。
flex-flowはflex-directionとflex-wrapを一度に指定できます。
diplay:flexを書かなくてもflexboxになります。

.flex-flow{
    flex-flow: row-reverse wrap-reverse;
}

順番の指定 order

Flexboxの子要素の並べ替えができます。

デフォルト値は「0」でマイナス値が利用できます。
通常はhtmlに記述した上から下へ表示されますが、orderを指定したことで、
orderの番号順(マイナス~0~プラス＜-2,-1,0,1,2＞）の順番で表示されます。

[4]
Order +1

[5]
Order +2

[1]
Order -2

[2]
Order -1

[3]
Order 0

<div class="flexOrder">
  <div class="fl_order_01">[4] <br>Order +1</div>
  <div class="fl_order_02">[5] <br>Order +2</div>
  <div class="fl_order_1">[1] <br>Order -2</div>
  <div class="fl_order_2">[2] <br>Order -1</div>
  <div class="fl_order_0">[3] <br>Order 0</div>
</div>

flex-grow

親要素の余ったスペースがある場合に子要素がどれくらい伸びるかを指定できます。

[1]

[2]
flex-grow 2

[3]

[4]
flex-grow 5

[5]

[6]

<div class="flexOrder2">
  <div>[1] </div>
  <div class="fl_ordergrow">[2] <br>flex-grow 2</div>
  <div>[3] </div>
  <div class="fl_ordergrow2">[4] <br>flex-grow 5</div>
  <div>[5] </div>
  <div>[6] </div>
</div>

flex-shrink

flex-grownの逆バージョン。
親要素の余ったスペースがある場合に子要素がどれくらい縮むかを指定できます。

[1]

[2]

[3]

[4]
flex-shrink 5

[5]

[6]

<div class="flexOrder3">
  <div>[1] </div>
  <div>[2] </div>
  <div>[3] </div>
  <div class="fl_ordershrink2">[4] <br>flex-shrink 5</div>
  <div>[5] </div>
  <div>[6] </div>
</div>

flex-basis

width同様に幅を指定できるプロパティ
px以外に%等の指定も可能です。
初期値はauto

[1]

[2]

[3]

[4]
flex-basis 240px;

[5]

[6]

<div class="flexOrder3">
  <div>[1] </div>
  <div>[2] </div>
  <div>[3] </div>
  <div class="flex-basis">[4] <br>flex-basis 240px;</div>
  <div>[5] </div>
  <div>[6] </div>
</div>

flex

flex-grow、flex-shrink、flex-basis を一つにまとめて書けます。
左から「flex-grow、flex-shrink、flex-basis」の順番です。
初期値はflex-grow(0)、flex-shrink(1)、flex-basis(auto)になっています。

flexを使ったグリッドレイアウト

子要素に flex = 1 の場合　等幅、等間隔で配置されます。
横幅は自動調整されます。
flexの値を大きくしていくことで細かく指定できます。

Grid Flex=1
Grid Flex=2

Grid Flex=1
Grid Flex=2
Grid Flex=1

Grid Flex=1
Grid Flex=2
Grid Flex=3

Grid Flex=1
Grid Flex=1
Grid Flex=1
Grid Flex=4

固定幅＋グリッド

min-width:200px
max-width:210px
Grid Flex=1
Grid Flex=1
Grid Flex=1

<div id="flex-ul-grid">
    <ul>
        <li>Grid Flex=1 </li>
        <li class="fl2">Grid Flex=2 </li>
    </ul>
    
    <ul>
        <li>Grid Flex=1 </li>
        <li class="fl2">Grid Flex=2 </li>
        <li>Grid Flex=1 </li>
    </ul>

    <ul>
        <li>Grid Flex=1 </li>
        <li class="fl2">Grid Flex=2 </li>
        <li class="fl3">Grid Flex=3 </li>
    </ul>

    <ul>
        <li>Grid Flex=1 </li>
        <li>Grid Flex=1 </li>
        <li>Grid Flex=1 </li>
        <li class="fl4">Grid Flex=4 </li>
    </ul>

<h4>固定幅＋グリッド</h4>
    <ul>
        <li class="min-wi200">min-width:200px<Br>max-width:210px </li>
        <li>Grid Flex=1 </li>
        <li>Grid Flex=1 </li>
        <li>Grid Flex=1 </li>
    </ul>



</div>

align-self 子要素の垂直方向の揃え

親要素の高さの空きが合った場合、子要素をどこに配置するかを指定できます。

プロパティ	内容
stretch	親要素の高さに合わせる
flex-start	親要素の開始位置に合わせる
flex-end	親要素の終わり位置に合わせる
center	中央揃え
baseline	ベースライン揃え

stretch

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

<div class="flexOrder4">
  <div>[1] </div>
  <div>[2] </div>
  <div>[3] </div>
  <div>[4] <br><br><br></div>
  <div>[5] </div>
  <div>[6] </div>
  <div>[7]<br><br><br></div>
  <div>[8] </div>
  <div>[9] </div>
</div>

flex-start

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

<div class="flexOrder4 fs">
  <div>[1] </div>
  <div>[2] </div>
  <div>[3] </div>
  <div>[4] <br><br><br></div>
  <div>[5] </div>
  <div>[6] </div>
  <div>[7]<br><br><br></div>
  <div>[8] </div>
  <div>[9] </div>
</div>

flex-end

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

<div class="flexOrder4 fsend">
  <div>[1] </div>
  <div>[2] </div>
  <div>[3] </div>
  <div>[4] <br><br><br></div>
  <div>[5] </div>
  <div>[6] </div>
  <div>[7]<br><br><br></div>
  <div>[8] </div>
  <div>[9] </div>
</div>

center

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

<div class="flexOrder4 fscenter">
  <div>[1] </div>
  <div>[2] </div>
  <div>[3] </div>
  <div>[4] <br><br><br></div>
  <div>[5] </div>
  <div>[6] </div>
  <div>[7]<br><br><br></div>
  <div>[8] </div>
  <div>[9] </div>
</div>

baseline

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

<div class="flexOrder4 fsbline">
  <div>[1] </div>
  <div>[2] </div>
  <div>[3] </div>
  <div>[4] <br><br><br></div>
  <div>[5] </div>
  <div>[6] </div>
  <div>[7]<br><br><br></div>
  <div>[8] </div>
  <div>[9] </div>
</div>

スポンサードリンク