カテゴリー

キーワード

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

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


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

CSS Flexboxプロパティ紹介(2)

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


前回に引き続き、Flexboxのプロパティを紹介します。


今回で全て紹介するつもりでしたが、記事が長くなりすぎたため2回に分けさせていただきました。
ご了承ください。


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



はじめに

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


flexコンテナ、flexアイテムという語句についてはこういう関係です。


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


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


flexアイテムの伸縮に関するプロパティ

flexプロパティのショートハンドが、flex-grow、flex-shrink、flex-basisという3つのプロパティです。
flex-grow、flex-shrink、flex-basisを一括指定したい場合は『flexプロパティ』を使ってください。


flex-growプロパティ

flex-growプロパティはflexアイテムの伸長係数(伸びる倍率)を設定するものです。
数字で指定します。


FlexコンテナがFlexアイテムを格納しても余りがある場合、指定されたプロパティに従い、自動的に伸びて余白を埋めます。


この指定をしたボックスがflexアイテムでないときは適用されません。
flexアイテムを個別に指定した場合、指定がないものは最小値となります。


また、負の値は指定できません。


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;
    width:500px;
    border:1px solid red;
}
.f_item {
    -webkit-flex-grow:1;/*--- safari(PC)用 ---*/
    flex-grow:1;
    /*--- 装飾 ---*/
    background-color:black;
    color:white;    
    text-align:center;
    border-left:1px solid white;
}
.f_item:first-child {
    -webkit-flex-grow:2;/*--- safari(PC)用 ---*/
    flex-grow:2;
    background-color:red;
}

flex-growプロパティの説明


解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの8、9行目 f_itemというクラス(flexアイテム)に『flex-grow:1;』を指定しています。5つあるflexアイテム全てに同じ数値を適用しているので、等倍でflexコンテナ内を埋めます。
CSSの16~18行目 :first-childという擬似クラスを用いて、最初のflexアイテムに『flex-grow:2;』を指定し、伸びる分が他のflexアイテムの2倍の比率になるようにしています。


flex-shrinkプロパティ

flex-shrinkプロパティはflexアイテムの縮短係数(縮む倍率)を設定するものです。
数字で指定します。


「flex-grow」とは逆で、数字が大きいほど幅が狭くなります


「flex-shrink」は「flex-wrap:nowrap」と同時に使用しないと効果がありません。
また、負の値は指定できません。


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:500px;
    border:1px solid red;
}
.f_item {
    width:150px;
    -webkit-flex-shrink:1;/*--- safari(PC)用 ---*/
    flex-shrink:1;
    /*--- 装飾 ---*/
    background-color:black;
    color:white;    
    text-align:center;
    border-left:1px solid white;
}
.f_item:first-child {
    -webkit-flex-shrink:2;/*--- safari(PC)用 ---*/
    flex-shrink:2;
    background-color:red;
}

flex-shrinkプロパティの説明画像


解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの4、5行目 はみ出しても折り返しをしないという指定です。
CSSの10行目 flexアイテムがflexコンテナからはみ出す大きさを指定しています。
CSSの11、12行目 各flexアイテムが均等に縮短されるように『flex-shrink:1;』を指定しています。
CSSの20、21行目 擬似クラス『:first-child』を使って、最初のflexアイテムに『flex-shrink:2;』を指定しています。
縮む分が他のflexアイテムの2倍の長さになります。


flex-wrapプロパティについてはコチラをどうぞ


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


flex-basis プロパティ

flex-basisの基本的な使い方は、widthプロパティやheightプロパティと同じです。


各flexアイテムの幅をwidthで指定しても、別のプロパティで比率を指定している場合、widthの値が無視されます。
そういうときに幅を固定してくれるのが、このflex-basisプロパティです。


『flex-direction』が、row、row-reverseのときは『flex-basis』は横幅を指定します。
『flex-direction』でcolumnやcolumn-reverseのときは『flex-basis』は縦の長さを指定することになります。


値に指定できるのは単位を含めた数値と、初期値である『auto』です。


なお、負の値は指定できません。


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;
    width:500px;
    border:1px solid red;
}
.f_item {
    -webkit-flex-basis:50px;/*--- safari(PC)用 ---*/
    flex-basis:50px;
    /*--- 装飾 ---*/
    background-color:black;
    color:white;    
    text-align:center;
    border-left:1px solid white;
}

flex-basisプロパティの説明


解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの8、9行目 単位を含めた数値で指定してください。この場合は横幅が50pxのflexアイテムが横に並ぶことになります。


flexプロパティ

flex-growプロパティ、flex-shrinkプロパティ、flex-basisプロパティをまとめて指定することができます。


flex:【flex-growプロパティの値】【flex-shrinkプロパティの値】【flex-basisプロパティの値】;


という書き方です。


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;
    width:500px;
    border-left:1px solid red;
}
.f_item {
    -webkit-flex:1 1 50px;/*--- safari(PC)用 ---*/
    flex:1 1 50px;
    /*--- 装飾 ---*/
    background-color:black;
    color:white;    
    text-align:center;
    border-left:1px solid white;
}

flexプロパティの説明画像


解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの8、9行目 『flex:1 1 50px;』と記述しています。これは『flex-grow:1;』、『flex-shrink:1;』、『flex-basis:50px;』と指定したときと同じです。
これは、各flexアイテムの幅である50pxを基準として、flexコンテナとの関係により(余白があるか、はみ出すか)、どう表示されるかが変わるということです。
今回の場合は、50pxのflexアイテムが5つ並んでも250pxにしかならないため、flexコンテナ(width:500px;)に余白が生まれます。
『flex-grow:1;』という指定がありますので、均等幅で余白を埋めることになります。


なお、flexプロパティでは、値を省略したときの初期値がそれぞれ次のように決まっています。


何も指定しない場合 ⇒ flex:0 1 auto;
flex:auto; ⇒ flex:1 1 auto;
flex:2 auto; ⇒ flex:2 1 auto;


注意点

伸長係数の注意点


複数のflexアイテムに別の伸長係数(伸びる倍率)が指定されていて、余白がある場合の処理です。


Flexbox 伸長係数の説明画像


flexアイテム①に比率1を指定し、flexアイテム②に比率2を指定しています。


伸長分の比率は各flexアイテム全体の長さではなく、上図のように、指定された比率に応じて余白分が分配されます。


同じように、縮短係数(縮む倍率)も、指定された比率によって、縮む分が決められます。
(数の大きい方が縮む分が長くなります)


まとめ

今回はflexアイテムの伸縮に関するプロパティを紹介しました。


コーディングをしていると、一括指定と個別に指定する場合が出てきますので、しっかり覚えて活用したいですよね。


では、次回は『flexアイテムの縦横方向揃えに関するプロパティ』を紹介します。


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



よろしければコチラもどうぞ。


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

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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