カテゴリー

キーワード

 
> 【CSS】Flexboxのプロパティ...

【CSS】Flexboxのプロパティ(flex-direction、flex-wrap、flex-flow、order)を紹介します


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

Flex ボックスのプロパティ1

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


今回と次回で、Flexboxのプロパティを紹介します。



Flexboxのプロパティ解説

FlexboxはIE9以下に対応していません。
IE10への対応はこの記事では割愛します。
PC版safari(バージョン6.1以降)対応用にベンダープレフィックスを使用しています。


display:flex; display:inline-flex;


まずは基本のこちらからです。


display:flex; ⇒ ブロックレベルのflexコンテナボックスを生成する。
display:inline-flex; ⇒ インラインレベルのflexコンテナボックスを生成する。


いずれもflexコンテナに指定してください。


flexコンテナ、flexアイテム説明


単純に、二つを指定した要素を並べても違いはわかりません。
併用するプロパティによって異なります。


また、注意点として、flex コンテナには、以下のプロパティと擬似要素は使えません。


CSS3マルチカラムレイアウトの『column-*』プロパティはflex コンテナに使えない。
『floatプロパティ』、『clearプロパティ』は使用できない。
『vertical-align』はflex アイテム(子要素)に対して効果を与えない。
疑似要素『::first-line』、『::first-letter』は,flex コンテナに使えない。


理由としては、
【flex コンテナはブロックコンテナではないので、ブロックレイアウトを前提としたプロパティ、擬似要素は使えない】
ということです。


Flexboxの基本についてはコチラをご覧ください
【CSS】Flexbox(フレキシブルボックスレイアウト)で要素を横並びにする方法
 


flex-direction プロパティ【表示方向】

flexアイテムがflexコンテナ内で『どの方向に向かって並ぶか』ということを指定します。


値は以下の4つです。


flex-direction:row; ⇒ 文字が入力されたときに向かう方向へ並ぶ。(通常左から右)
flex-direction:row-reverse; ⇒ rowの反対側に向けて並ぶ。(通常右から左)
flex-direction:column; ⇒ 文字が入力されて改行されたときに向かう方向へ並ぶ。(通常上から下)
flex-direction:column-reverse; ⇒ columnと逆に並ぶ。(通常下から上)


参考ソースをどうぞ


HTML

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

CSS

.flexbox {
    display: -webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
    -webkit-flex-direction:row;/*--- safari(PC)用 ---*/
    flex-direction:row;
    /*----- 装飾 -----*/
    width:500px;
    border:1px solid red;
}
.f_item {
    width:80px;
    background-color:black;
    color:white;
    text-align:center;
    border-left:1px solid white;
}

解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの4、5行目 ここにrow、row-reverse、column、column-reverseのいずれかを指定してください。


rowを指定した場合】
flex-direction:row;の説明画像


row-reverseを指定した場合】
flex-direction:row-reverse;の説明画像


columnを指定した場合】
flex-direction:column;の説明画像


column-reverseを指定した場合】
flex-direction:column-reverse;の説明画像


flex-wrap プロパティ【行制御】

flexコンテナに入りきらないflexアイテムを、『そのまま一行で表示するか、折り返して複数行にするか』を指定します。


値は以下の3つです。


flex-wrap:nowrap; ⇒ 改行なし
flex-wrap:wrap; ⇒ flexコンテナに入るよう改行して表示
flex-wrap:wrap-reverse; ⇒ flexコンテナに入るよう改行して表示するが、文字の改行方向と逆方向へ折り返される。(wrapの逆、通常上へ折り返される)


Flexアイテムの合計幅がFlexコンテナの幅を超えると、Flexアイテムの幅は自動的に縮小します(flex-growに応じて縮小の仕方は異なる)


参考ソースをどうぞ


HTML

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

CSS

.flexbox {
    display: -webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
    -webkit-flex-wrap:nowrap;/*--- safari(PC)用 ---*/
    flex-wrap:nowrap;
    /*----- 装飾 -----*/
    width:400px;
    border:3px solid red;
}
.f_item {
    width:120px;
    background-color:black;
    color:white;
    text-align:center;
    border-left:1px solid white;
}

解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの4、5行目 ここにnowrap、wrap、wrap-reverseのいずれかを指定してください。


nowrapを指定した場合】
flex-wrap:nowrap;の説明画像


wrapを指定した場合】
flex-wrap:wrap;の説明画像


wrap-reverseを指定した場合】
flex-wrap:wrap-reverse;の説明画像


flex-flow プロパティ【表示方向、行制御両方】

flex-direction』と『flex-wrap』をまとめて指定できます。
flexコンテナ(親要素)に指定してください。

flex-flow:【flex-directionの値】【flex-wrapの値】;

という指定をします。


HTML

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

CSS

.flexbox {
    display: -webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
    -webkit-flex-flow:row-reverse wrap-reverse;/*--- safari(PC)用 ---*/
    flex-flow:row-reverse wrap-reverse;
    /*----- 装飾 -----*/
    width:400px;
    border:3px solid red;
}
.f_item {
    width:120px;
    background-color:black;
    color:white;
    text-align:center;
    border-left:1px solid white;
}

flex-flowの説明画像


解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの4、5行目 今回は『row-reverse wrap-reverse』という値を指定しました。間に半角スペースを入れて、色々試してみてください。


order プロパティ【表示順】

通常、HTMLで記述された順にブラウザには表示されます。

その表示順を変更するプロパティです。
orderプロパティには負の値も指定することができます。
初期値はorder:0;です。


参考ソースをどうぞ。


HTML

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

CSS

ul.flexbox {
    display: -webkit-flex;/*--- safari用 ---*/
    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;
}
ul.flexbox li:first-child {
    -webkit-order:1;
    order:1;
}

orderプロパティの説明


解説
CSSの15、16行目 『:first-child 』という疑似クラスを使って、最初のli要素に『order:1;』を指定しました。
1番と書かれた最初のli要素が最後尾に表示されています。
(他のli要素は初期値の『order:0;』だからです)


まとめ

Flexboxのプロパティを4つ紹介しました。
PCの主要ブラウザの中で、safariだけはベンダープレフィックスをつける必要がありますので、気をつけてください。


次回は残りのプロパティを紹介したいと思います。


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



コチラも併せてお読みください


【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します
 

【CSS】Flexboxのプロパティ(justify-content、align-items、align-self、align-content)を紹介します
 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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