カテゴリー

キーワード

 
> 【CSS】Flexbox(フレキシブ...

【CSS】Flexbox(フレキシブルボックスレイアウト)で要素を横並びにする方法


2015 年 4 月 20 日 投稿    view: 28504
タグ:
このエントリーをはてなブックマークに追加

CSS Flexboxで横並び

こんにちは、WEBマーケティング部の杉尾です。


今回は、前回までの要素の横並びに引き続き、『Flexbox(フレキシブルボックスレイアウト)で要素を横並びにする方法』を紹介します。


floatでの横並びはコチラ
【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)


『display: inline-block;』での横並びはコチラ
【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)


『display:table-cell;』での横並びはコチラ
【CSS】display:table-cell;で要素を横並びにする方法



Flexbox


Flexboxって何?

俗に言うFlexboxとは、フレキシブルボックスレイアウトモジュール(Flexible Box Layout Module)のことです。


モジュールとは『まとまりのある機能を持った部品』と訳される英語なのですが、
この場合は、『機能ごとに分けられたもの』という理解で大丈夫だと思います。


FlexboxはCSS3で採用されたもので、ボックスレイアウトの進化系とでも言うべきものです。


草稿段階で大幅な仕様変更が2度あったせいで、これまでは使いづらい機能でした。
しかし、ようやく仕様が固まりつつあるようですので、これからは積極的に使っていけそうです。


詳しくは次項で紹介しますが、要素を柔軟に配置できるので複雑なレイアウトでも、Flexboxだけで表現できます。


Flexboxでできること

1.たった一行の指定で要素を横並びにできる。
2.どちらに向かって要素を並べるか決められる。
3.ボックス内で折り返すかどうか、折り返すならその方向はどちらかを指定できる。
4.要素を並べる順番を自由に指定できる。
5.ボックス内の要素のサイズを自由に指定できる。
6.要素の上下中央揃えを指定できる。


Flexbox対応ブラウザ

Can I use…
caniuse.comのFlexbox使用できるかどうかの画像


statcounter
Statcounterブラウザシェア画像


ご覧のように、現行の最新ブラウザではsafariを除いて、Flexboxに対応しています。
safariでは、ベンダープレフィックス(-webkit-)が必要です。


IE9では未対応ですが、2015年1~3月期での国内ブラウザシェアでは3.66%になっています。
今後、長期的に見て増えることはないでしょうから、案件によっては切り捨ててもいいと思います。


IE10は「display:-ms-flexbox」での対応、Android標準ブラウザとiOS safariの古いバージョンでは「display:-webkit-box」での対応となります。


Flexboxのボックスモデルとその用語

親要素を『flexコンテナ』と呼び、その中にある子要素を『flexアイテム』と呼びます。


その他の指定は特に覚える必要はありませんので、W3Cの草稿を見るときにチェックする程度でいいと思います。


flexコンテナ、flexアイテムの画像



(画像はCSS Flexible Box Layout Module Level 1(2015 年 4 月 14 日付 編集者草案)から)


Flexboxで要素を横並びにする

参考ソースをどうぞ


HTML

    <ul class="flexbox">
        <li>
            1
        </li>
        <li>
            2
        </li>
        <li>
            3
        </li>
        <li>
            4
        </li>
        <li>
            5
        </li>
    </ul>

CSS

ul.flexbox {
    display:flex;
    width:500px;
}
ul.flexbox li {
    width:99px;
    list-style-type:none;
    background:black;
    border-left:1px solid white;
    color:white;
    text-align:center;
}

display:flex;で横並びにした画像


見やすいように背景を黒、文字色を白にし、境界線をつけています。


【解説】
CSSの2行目、『display:flex;』が横並びの指定です。
Flexboxに対応しているブラウザですと、CSSを一行付け加えるだけで、画像のように要素(flexアイテム)が横並びになります。
他の指定は見やすいように装飾を付け加えているだけです。


IE10に対応させるには、『display:-ms-flexbox;』を、
PCのsafariに対応させるには、3.1~6.0までは『display:-webkit-box;』、6.1以降は『display:-webkit-flex;』を、
Android-標準ブラウザはバージョン2.1~4.3までは『display:-webkit-box;』、4.4以降『display:flex;』を、
iOS-Safariはバージョン3.2~6.1まで『display:-webkit-box;』、7.0では『display:-webkit-flex;』の指定がそれぞれ必要になります。


この辺は案件に合わせて、適宜追記してください。


まとめ

次回は、Flexboxのプロパティを説明したいと思います。


最後までお読みいただき、ありがとうございました。


floatでの横並びはコチラ
【CSS】floatとclearfixで要素を横並びにする方法を紹介します(前半はfloatの説明)


『display: inline-block;』での横並びはコチラ
【CSS】display:inline-block;で要素を横並びにする方法(前半はHTML5におけるボックスの話)


『display:table-cell;』での横並びはコチラ
【CSS】display:table-cell;で要素を横並びにする方法

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事