カテゴリー

キーワード

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

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


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

CSS Flexboxのプロパティ紹介3 

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


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


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

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


はじめに

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


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


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


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


flexアイテムの縦横方向揃えに関するプロパティ


justify-content プロパティ

flexアイテムの横方向の整列を指定します。(flex-directionプロパティの値がrow、row-reverseのときは縦方向)
必ずflexコンテナに指定してください。


値は以下の5つです。


flex-start ⇒ 横並びの場合(flex-direction:row;、flex-direction:row-reverse;)は左揃えになり、縦並びの場合(flex-direction:column;、flex-direction:column-reverse;)は上揃えになります。
flex-end ⇒ flex-startの逆です。横並びの場合は右揃え、縦並びの場合は下揃えになります。
center ⇒ 各flexアイテムが中央揃えになります。
space-between ⇒ flexコンテナ内で各flexアイテムが均等の間隔を持って整列します。
space-around ⇒ space-betweenと同じく均等の間隔を持って整列しますが、両端の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;
    -webkit-justify-content:flex-start;/*--- safari(PC)用 ---*/
    justify-content:flex-start;
    width:500px;
    border-left: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;
}

解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの4、5行目 『justify-content:flex-start;』を指定していますので、この場合はflexアイテムが左揃えになります。
CSSの10、11行目 見やすいように『flex-basis:50px;』を指定して、flexアイテムの幅を固定してみました。


flex-basisプロパティについてはコチラをご覧ください
【CSS】Flexboxのプロパティ(flex-grow、flex-shrink、flex-basis、flex)を紹介します
 


flex-startを指定した場合】
justify-contentプロパティの説明画像1


flex-endを指定した場合】
justify-contentプロパティの説明画像2


centerを指定した場合】
justify-contentプロパティの説明画像3


space-betweenを指定した場合】
justify-contentプロパティの説明画像4


space-aroundを指定した場合】
justify-contentプロパティの説明画像5


align-items と align-self プロパティ

flexアイテムの縦方向の整列を指定します。(flex-directionプロパティの値がcolumn、column-reverseのときは横方向)


align-itemsプロパティはflexコンテナ(親要素)に指定して、すべてのflexアイテム(子要素)に同じ位置揃えを要求します。
align-selfプロパティはflexアイテム(子要素)に指定して、個別のflexアイテム(子要素)の位置揃えを要求します。


align-itemsの値は以下の5つです。


flex-start ⇒ 上揃えです。(flex-directionプロパティの値がcolumn、column-reverseのときは左揃え)
flex-end ⇒ 下揃えです。(flex-directionプロパティの値がcolumn、column-reverseのときは右揃え)
center ⇒ 上下中央寄せです。
baseline ⇒ 最初のflexアイテムのbaselineに揃います。
stretch ⇒ flexコンテナいっぱいに広がります。


align-selfプロパティも同じ値をとることができます。
また、align-selfは『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;
    -webkit-align-items:baseline;/*--- safari(PC)用 ---*/
    align-items:baseline;
    width:500px;
    height:200px;
    border-left: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;
}
.f_item:first-child {
    height:150px;
    padding:20px 0 0 0;
}
.f_item:last-child {
    height:90px;
}

解説
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの4、5行目 ここでは『align-items:baseline;』を指定しています。
CSSの7行目 flexコンテナの高さを200pxにして、見やすくしています。
CSSの11、12行目 flexアイテムの横幅を50pxにして見やすくしています。
CSSの20行目~ 最初のflexアイテムの高さを150pxにし、padding-top:20px;という指定をしています。
CSSの24行目~ 最後のflexアイテムの高さを90pxにしています。


flex-startを指定した場合】
align-itemsプロパティの説明画像1


flex-endを指定した場合】
align-itemsプロパティの説明画像2


centerを指定した場合】
align-itemsプロパティの説明画像2


baselineを指定した場合】
最初のflexアイテムのbaselineに揃います。
padding-top:10px;を指定したので、baselineが下がっています。baselineとはこの場合、文字の下端と捉えて大丈夫です。(厳密には違います)
他のflexアイテムはそれを基準にして並ぶことになります。
align-itemsプロパティの説明画像4


stretchを指定した場合】
最初のf_itemには高さ150px、最後のf_itemには高さ90pxという個別指定をしていますのでそちらが優先されます。
それ以外はflexコンテナの高さ(200px)いっぱいに伸びます。
align-itemsプロパティの説明画像5


align-content プロパティ

flex-directionの値が『row』『row-reverse』で(つまり横フローのとき)、flexコンテナ内の縦に余白がある場合、どのように一連のflexラインを並べるか指定するプロパティです。
このプロパティは、flexコンテナ内にflexアイテムが一つしかないときは無効です。


値は以下の6つです。


flex-start ⇒ flexコンテナの始端から並びます。
flex-end ⇒ flex コンテナの終端に、flexアイテムの終端が合うように並びます。
center ⇒ flex コンテナの中央に並びます。
space-between ⇒ flex コンテナの中で均等に分布されます。
space-around ⇒ 始端と終端に空間が生まれます。その空間はflexアイテム同士の間隔の半分の幅です。
stretch ⇒ flexコンテナ内に余白が生まれないようにflexアイテムが伸びます。


HTML

<div class="flexbox">
    <div class="f_item">
        ああああああああああああああ
    </div>
    <div class="f_item">
        いいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいいい
    </div>
    <div class="f_item">
        うううううううう
    </div>
    <div class="f_item">
        ええええええええ
    </div>
    <div class="f_item">
        おおおおおおおおおおおおおおおおおおおおおお
    </div>
</div>

CSS

.flexbox {
    display:-webkit-flex;/*--- safari(PC)用 ---*/
    display:flex;
    -webkit-align-content:flex-start;/*--- safari(PC)用 ---*/
    align-content:flex-start;
    -webkit-flex-wrap:wrap;/*--- safari(PC)用 ---*/
    flex-wrap:wrap;
    width:500px;
    height:200px;
    border:1px solid red;
}
.f_item {
    background-color:black;
    color:white;
    border-left:1px solid white;
}

解説
HTMLの6行目、15行目 flexアイテムが折り返されるように、長い文章を書いたという体裁をとっています。
CSSの2、3行目 この指定で、flexboxというクラスのついたdivがflexコンテナを形成します。(中のf_itemというクラスのついた5つのdivがflexアイテムになります)
CSSの4、5行目 ここでは『align-content:flex-start;』を指定しています。


flex-startを指定した場合】
align-contentプロパティの紹介


flex-endを指定した場合】
align-itemsプロパティの説明画像2


centerを指定した場合】
align-itemsプロパティの説明画像3


space-betweenを指定した場合】
align-itemsプロパティの説明画像4


space-aroundを指定した場合】
align-itemsプロパティの説明画像5


stretchを指定した場合】
align-itemsプロパティの説明画像6


まとめ

三回にわたってFlexboxのプロパティを紹介しました。


前回、前々回の記事(下記にリンクがあります)と併せてお読みいただくと、Flexboxの使い方がわかると思います。


次回はFlexboxの、これまでの仕様変更と現状における各主要ブラウザへの対応を紹介したいと思います。


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



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


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

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

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

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

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

前職:ライター、小説家

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

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

 


カテゴリー

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