flex レイアウト詳説〜Flex Box Layout

flex レイアウト詳説〜Flex Box Layout

レイアウト作成のためのCSS

CSS2.1 にて定義されているレイアウトモードは次の4つです。

  • 文書を配置するために設計されたブロックレイアウト
  • テキストを配置するために設計された行内レイアウト
  • 表を作成するためのtableレイアウト
  • 他の要素とは別個に位置決めするための「positioned」レイアウト(position: fixed や position: absolute 等)レイアウト

CSS3ではflexレイアウトが新たに導入されました。

flexレイアウトは、ブロックレイアウトの挙動に似ていますが、ブロックレイアウトでは面倒だったカラムの作成などがより簡単にできるようになっています。
このページでは「flexレイアウト」について解説します。
尚、このページの内容はCSS Flexible Box Layout Module Level 1を参考にした内容です。

flexコンテナの概要

  • フローの方向は左方、右方、下方、あるいは上方へ配置することができます。
  • 各方向へフローした要素の配置順序をCSSの設定で逆順にしたり、配置替えできます(HTMLの文章構造を変更することなく、視角デザインを変更します。)
  • 水平方向に配置したり、垂直方向に配置することができます。また単一行にしたり、複数行に折り返すことができます。
  • それらのサイズは可能な限り “flex ” (伸縮可能)になれます。
  • flexコンテナに対してお互いどうしを左揃え、中央揃え、右揃えにできます
  • visibility: collapseを使用することでflexコンテナにレイアウトされた要素は高さのサイズは保ちつつ、レイアウト方向にcollapse(詰めた状態で非表示)された状態にしたり、その逆(表示状態)にできます。

flexレイアウト作例

見出し、写真、説明、購入ボタンがある商品販売ページのレイアウトの一部を紹介します。
各商品のセクションは、アイテムの説明の長さに関係なくどれも同じ縦横サイズを持ち、各商品のセクションの中では写真がテキストの上に位置し、購入ボタンは下端に整列させたいとします。 flexレイアウトを用いれば簡便に実現することができます。(なにかと苦手な人も多いfloatによるレイアウトの必要もなくなります)

このレイアウトでは一連の商品アイテムの縦幅をすべて等しくするために、flexレイアウトを利用します。
各セクションでは、それ自身が1つのカラムをなすflexコンテナになり、その内容を縦方向に配置します。

各セクションの中では,HTML文書の論理的順序は見出し, 説明, 写真の順になります。 これは,読み上げや非CSSブラウザにおいても意味のある順序付けを供する一方で、視覚的な配置としては、orderを用いて内容の後方に在る画像を最上端に引き上げ、新しく定義されたalign-selfプロパティを用いてそれを横方向の中央に位置させることができます。つまりHTMLの配置と見かけの配置を簡単に入れ替えることが可能なわけです。

購入ボタンに対する上側のautoマージンにより、どの項目ボックスの中でも,アイテムの説明の縦幅に関係なく,ボタンを下端に位置させることができます。

作例サンプル

#deals {
display: flex;
/* flex レイアウトにより,一連のアイテムは 縦幅が等しくされる */

flex-flow: row wrap;
/* 一連のアイテムを,複数ラインに渡って折り返す */
}
.sale-item {
display: flex;
/* flex レイアウトを用いて 各アイテムを配置
*/

flex-flow: column;
/* アイテムの内容を縦方向に配置 */
}
.sale-item > img {
order: -1;
/* 画像を(視覚的順序で)他の内容より前に移動 */

align-self: center;
/* 画像を交叉方向(横方向)の中央に据える */
}
.sale-item > button {
margin-top: auto;
/* 上端の autoマージンによりボタンは下端へ押しやられる */
}

<section id='deals'>
<section class='sale-item'>
<h1>赤い苺</h1>
<p>朝摘み新鮮
<ul>
<li>いちご
<li>甘い
<li>赤い
<li>新鮮
</ul>
<img src="st2.jpg"
alt="赤いいちご">
<button>今すぐ買う</button>
</section>
<section class='sale-item'>
<h1>青い苺</h1>
<p>夜摘み新鮮
<ul>
<li>いちご
<li>大人の味
<li>青い
<li>ウケ狙いに
</ul>
<img src="st1.jpg"
alt="青いいちご">
<button>今すぐ買う</button>
</section>
</section>

flexレイアウトのボックスモデルとその用語

flexコンテナとは、displayプロパティの値が「flex」または「inline-flex」にすることで生成されるボックスです。 flexコンテナのフロー内にある子要素はflexアイテム と呼ばれflexレイアウトモデルの下に配置されます。

レイアウトの計算は、ブロック、インラインによる旧来のレイアウトとは異なり,flexレイアウトでは「flex方向」に焦点があてられます。
flexレイアウトについてよりわかりやすくするために、flexフローに関係する一連の用語を定義します。

flex-flow値は、これらの用語がどのように物理的な[ 方向(上端/右端/下端/左端), 軸(縦方向/横方向), サイズ(横幅/縦幅) ]に対応付けられるかを決定するものです。
flex-direction-terms

main axis (主軸):フローする方向
main dimension(主次元):縦方向か横方向かを意味します。
flexコンテナの main axis(主軸)とは、flexアイテムフローする方向です。左から右への横方向にレイアウトしたならmain axis(主軸)は左から右向きの横軸となります。
main-start (主始端):フローする方向の開始点
main-end (主終端):フローする方向の終了点
一連の flexアイテムは、主始端側から主終端側へ向けてコンテナ内に置かれます。右方向の横並びにレイアウトしたならmain-start (主始端)はflexコンテナの左端になり、main-end (主終端)はflexコンテナの右端になります。
main size (主サイズ):flexコンテナのサイズ
main size property (主サイズプロパティ):サイズはwidthかheightで決まります。
flexアイテムの横幅, 縦幅のうちmain axis(主軸)の方がアイテムの主サイズになります。main size(主サイズ)を決めるプロパティは、フローの方向で違います。横向きのフローなら「width」を使用し、縦向きのフローなら「height」を使用して設定します。
また、「max-width」、「max-height」、「min-width」、「min-height」プロパティで指定することもできます。
cross axis (crossする軸):フローする方向と垂直な向き
cross dimension (crossする次元)
main axis(主軸)に垂直な軸はcross axis( crossする軸) と呼ばれ, cross dimension(crossする次元)に延伸するものです。横方向にレイアウトしたならmain axis(主軸)に垂直となる縦方向になります。
cross-start (crossの開始点)
cross-end (crossの終了点)
flexアイテムはcross-startからcross-end の間に収まります。
cross size (crossサイズ)
cross size property (crossサイズプロパティ)
crossサイズを決めるプロパティ は、 width, height のうちフローの方向で決まります。横方向のフローならcrossサイズは「height」、縦方向のフローなら「width」で設定します。また、「max-width」、「max-height」、「min-width」、「min-height」プロパティで指定することもできます。

flexコンテナの指定〜displayプロパティの値「flex 」と「 inline-flex」の使い方

Flexible Box Layoutを使うためには「Flexboxコンテナー」を作成することが必須です。
Flexboxコンテナーの作成方法はdisplayプロパティの値を「display:flex」あるいは「display:inline-flex」と指定するだけです。

少し前までは「display:box」と指定する方法でしたが「display:flex」に変更になっています。間違わないようにしてください。
safariはsafari7から「display:flex」に対応しています。少し古いバージョンに対応するためにもdisplay: -webkit-flexboxを付けておく必要があります。

プロパティ名: display
値 ; flex | inline-flex

flex
要素は,ブロックレベルの flexコンテナボックスを生成するようになります。display: flexサンプル

#wrapper{
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
}
inline-flex
要素はインラインレベルの flexコンテナボックスを生成するようになります。

flexコンテナの特徴

  • flexコンテナは、その要素が囲む子要素をflexレイアウトします。
  • floatしたものは flexコンテナ内には侵入しません。
  • flex コンテナのマージンとその内容のマージンとの間の相殺は上下間であっても生じません。
  • flex コンテナは、ブロックコンテナと同じ様にそれらの内容に対する包含ブロックを形成します。
  • overflow プロパティは、flexコンテナにも適用されます。

flexコンテナとブロックコンテナの違い

  • Multicolモジュールのすべての column-* プロパティは、flex コンテナ上では効果を持ちません。
  • floatとclearは、flexアイテム上では効果がありません。けれどもそれをフローから外すことはありません。
  • vertical-align は、 flex アイテム上では 効果がありません。
  • 疑似要素(::first-line、::first-letter)は,flexコンテナには適用されません。

*要素に指定された display の値が inline-flex である場合、その display プロパティの算出値は,一定の状況下でflexになります。

flexアイテム

flexアイテムとは、flexコンテナのフロー内にある要素のボックスのことです。

flexコンテナのフロー内にある子要素はflexアイテムになります。flexコンテナの内側に直接的に包含されているテキストがあるなら、匿名flexアイテムで包まれます。 但し、半角スペース・タブ・改行だけで構成された匿名flexアイテムは、display: noneで指定されているように描画されません。

flexアイテム自体はブロックレベルボックスではなく、flexレベルのボックスになります。

flexアイテムのいくつかの例

flexアイテムのいくつかの例サンプル

<div style="display: flex;">

<!-- flex アイテム:子ブロック -->
<div id="item1">block</div>
<!-- flex アイテム: 浮動体にされた要素 — その効果は無視される -->
<div id="item2" style="float: left;">float</div>
<!-- flex アイテム: 行内内容を囲う匿名ブロックボックス -->
anonymous item 3

<!-- flex アイテム: 行内の子 -->
<span>
item 4
<!-- flex アイテムはブロックの周囲で分割されることはない -->
<div id="not-an-item">item 4</div>
item 4
</span>
</div>

flexコンテナを生成する要素のフロー内にある子に指定された display-outside が inline-level ならば、それは block-level に変更されます。(これは実質的にどの行内 display 値も等価なブロックに変換します。)

tableタグをflexアイテムにした場合のtableの扱いについては原文の翻訳では以下のとおりです。

display: table を伴う flex アイテム上においては、 table 包装ボックスが flex アイテムになり, order, align-self プロパティが適用される。 caption ボックスの内容は、 table 包装ボックスの[ 最小内容サイズ / 最大内容サイズ ]の計算に寄与する。 しかしながら, width, height と同様に、 flex の各種下位プロパティは,次の様に table ボックスに適用される: flex アイテムの最終的なサイズは、[ table 包装ボックスの辺と table ボックスの内容辺の間の距離がすべて table ボックスのボーダーとパディングを併せた領域の一部であって, table ボックスが flex アイテムであった ]かのようにレイアウトを行うことにより,計算される。

絶対位置にされた子要素flex

flexコンテナの子要素のうち、絶対配置にされているものは、 並び替えの段を除きflexレイアウトからはずれます。

flex アイテムのマージンとパディング

隣接するflexアイテムのマージンは相殺されません。 autoマージンは、対応する次元の余った空間を調整することができます。
flexアイテム上のパーセントによるマージンとパディングは、常に それらの対応するフローの方向の(横側にフローなら幅)に対して決まります。

flexアイテムのz方向の順序付け

flexアイテムは、HTML記述順の代わりに,orderによる視角レイアウトの変更ができますが、それ以外の通常はCSS2.1の時のインラインブロックと同様の順番でz方向に並びます。

collapseされたアイテム

flexアイテム上にて visibility: collapse を指定することにより、flexアイテムは collapse されます。 collapseされたflexアイテムは描画対象からはまるごと外されますが、 flexラインのclossサイズ(横方向のフローの場合は高さ)を一定に保たせるために、概念的な突っ支い棒だけ居残るようにされます。 従って、flexコンテナの flexラインが一本だけの場合、アイテムにおけるcollapseの有無の動的な変化は,flexコンテナのclossサイズ(横レイアウトの場合高さ)に変化はありません。つまり、visibility: collapseを使用してflexアイテムを消しても全体の高さに変化はありません。

visibility: collapseを使用したサンプル

<style>
@media (min-width: 60em) {
/* (既定のテキストサイズに比して)十分な部屋があるときだけ, 2 本の column でレイアウトする */
header + div { display: flex; }
#main {
flex: 1; /* 残りの空間すべては #main が占める */
order: 1; /* ナビゲーションの後ろ(右側)に置く */
min-width: 12em; /* 主内容領域のサイズ法を最適化 */
}
}
/* visibility: collapse を機能させるため,メニュー項目に flex レイアウトを用いる */
nav > ul > li {
display: flex;
flex-flow: column;
}
/* 下位メニューは,操作対象にされていない間は動的に collapse */
nav > ul > li:not(:target):not(:hover) > ul {
visibility: collapse;
}
</style>
…
</header>
<div>
<article id="main">
Interesting Stuff to Read
</article>
<nav>
<ul>
<li id="nav-about"><a href="#nav-about">About</a>
…
<li id="nav-projects"><a href="#nav-projects">Projects</a>
<ul>
<li><a href="…">Art</a>
<li><a href="…">Architecture</a>
<li><a href="…">Music</a>
</ul>
<li id="nav-interact"><a href="#nav-interact">Interact</a>
…
</ul>
</nav>
</div>
<footer>

flexアイテムの暗黙の最小サイズ

flexアイテムの最小サイズは min-width, min-height プロパティを使用しますが、初期値として新たに auto 値が導入されています。
autoは切り詰めサイズ、転換サイズ、内容サイズなどで決まるようです。以下翻訳文から

auto
このキーワードが,[ overflow が主軸において visible である,flex アイテム ]の min 主サイズプロパティに指定された場合、アイテムの最小サイズは,次の表で与えられる:
切り詰めサイズ 転換サイズ 最小サイズ
内容サイズ
✓ min(切り詰めサイズ, 内容サイズ)
✓ min(転換サイズ, 内容サイズ)
✓ ✓ min(切り詰めサイズ, 内容サイズ)

【 表のどの行による最小サイズが用いられるかは、 “✓” が入っている欄の上端見出しに示された変数が下で定義されるかどうかに応じる。 】

ここで:

切り詰めサイズ

アイテムの flex-basis が main-size であって, かつ アイテムの主サイズプロパティの算出値 s が確定的であるときに定義される: 値は、 max 主サイズプロパティの値 t が[ 確定的ならば min( s, t ) / 不定ならば s ]で与えられる。
転換サイズ

アイテムが内在的 縦横比を持ち, かつ その交叉サイズプロパティの算出値 s が確定的であるときに定義される: 値は、まず s を max 交叉サイズプロパティの値 t が[ 確定的ならば min( s, t ) / 不定ならば s ]にした結果 s を,min 交叉サイズプロパティの値 t が[ 確定的ならば max( s, t ) / 不定ならば s ]にした結果を,縦横比で変換した結果で与えられる。
内容サイズ

値は、主軸における最小内容サイズを s とするとき, (1) まず,アイテムが内在的 縦横比を持つならば、アイテムの max 交叉サイズプロパティの値 t が[ 確定的ならば min( s, [ t を縦横比で変換した結果] ) / 不定ならば s ]にした結果 s を,min 交叉サイズプロパティの値 t が[ 確定的ならば max( s, [ t を縦横比で変換した結果] ) / 不定ならば s ]にした結果 s を得る。 (2) 結果は、アイテムの max 主サイズプロパティ t が[ 確定的ならば min( s, t ) / 不定ならば s ]で与えられる。

他の場合、このキーワードの算出値は(将来仕様にて定義されない限り) 0 になる。

順序付けと方位

flexコンテナの内容は、任意の方向, 任意の順序で配置できます。 これにより、これまでfloat, clear プロパティの併用によるハックなどで複雑、あるいは不安定な手法を要していた効果も簡単に作成できるようになります。 この機能性は flex-direction, flex-wrap, order プロパティを使用して実現します。

flexのフロー方向〜flex-directionプロパティ

名前 flex-direction
値 row | row-reverse | column | column-reverse
初期値 row
適用対象 flex コンテナ
継承 されない
媒体 visual
算出値 指定値

flex-direction のサンプル

flex-direction プロパティは、flexコンテナの主軸の方向を設定することにより,flexアイテムが flexコンテナの中でどのように置かれるかを指定するものです。 つまりflexコンテナの向きを決めるものです。右方向横に並べるか、左方向横にならべるか、上から下に並べるか、下から上に並べるかなどを決めます。

row
flex コンテナの主軸は、通常は左から右方向。 フローの起点/フローの終点の方向は、それぞれ,現在の書字モードの 行内始端/行内終端 の方向に等価になります。
つまり、左端から右方向に子要素がHTMLの書き順で並びます。全ての子要素にfloat:leftを設定したような挙動になります。
row-reverse
フローの起点/フローの終点の方向が入れ換わります。つまり右端から左方向に子要素がHTMLの書き順で並びます。全ての子要素にfloat:rightを設定したような挙動になります。
column
flex コンテナのフローの方向は、現在の通常フローと同じ方位になります。 主始端, 主終端の方向は、それぞれのブロック始端〜ブロック終端の方向に等価になります。つまり、子要素はHTMLの書き順で、上から下に配置されます。通常フローと同じような配置になります。
column-reverse
フローの方向が入れ換わります。つまり、子要素はHTMLの書き順で、下から上に配置されます。
** …-reverse 値は、ボックスの順序付けを “逆順” にするものではなく、それらはフローの方向のみを変化させるものです。 塗り, 読み上げ, 逐次的ナビゲーションの順序は影響されません。

flex ラインの折り返し法〜flex-wrapプロパティ

名前 flex-wrap
値 nowrap | wrap | wrap-reverse
初期値 nowrap
適用対象 flex コンテナ
継承 されない
媒体 visual
算出値 指定値

flex-wrap のサンプル

flex-wrapプロパティは、flexコンテナが 単一行になるか 複数行のいずれになるかを決め、および複数行の場合、折り返し地点が逆にするかどうかを決定します。

nowrap
flexコンテナは単一行になります。 closs始端方向は,現在の書字モードの行内始端closs軸に属する方と等価になります。
wrap
flexコンテナは複数行になります。
wrap-reverse
flexコンテナは複数行になりますが、折り返し地点が逆になります。

flexのフロー方向と折り返し〜flex-flowショートハンドプロパティ

名前 flex-flow
値 <‘flex-direction’> || <‘flex-wrap’>
初期値 個々のプロパティを参考
適用対象 flex コンテナ
継承 個々のプロパティを参考
媒体 visual
算出値 個々のプロパティを参考

flex-flowプロパティは、flex-direction, flex-wrapプロパティを設定するための簡略形プロパティであり、 flexコンテナの方向を決めます。

**flex-flow 方向は書字モードの影響を受けます。 縦書き日本語の下では、row flexコンテナは上端から下端へ配置されます。

陳列順序〜orderプロパティ

flexアイテムは、既定ではそれらがソース文書に現れるのと同じ順序で配置されます。
order プロパティは、この順序付けの変更をすることができます。
名前 order

初期値 0
適用対象 flex アイテム , および flex コンテナの子であって 絶対位置にされているもの
継承 されない
媒体 visual
算出値 指定値
アニメーション 可

orderプロパティは、一連のflexアイテムを序数が付与されたいくつかのグループに仕分けることを通して、それらが flexコンテナの中に現れる順序を制御します。 flexアイテムがどのグループに属するかを表す序数を指定する単独の整数値をとります。
特に指定されない限り、このプロパティはflexアイテムでないボックスに対しては 効果はありません。

アクティブなタブが常に左端にくるようなタブ型ナビの例

.tabs {
display: flex;
}
.tabs > * {
min-width: min-content;
/* タブが内容に比して小さくなり過ぎないようにする */
}
.tabs > .current {
order: -1; /* 既定の 0 を,下回る値 */
}

並び替えとアクセス容易性

orderプロパティは、HTML構造(音声読み上げブラウザ)の順序付けには影響しません。 同様にorderは、逐次的ナビゲーションモードの下での既定の走査順序(一連のリンクに渡る巡回など — 例えば nav-index

 や tabindex [HTML40] など)にも影響しません。視覚的であって、論理的でないような内容の並び替えに限ってorderを利用しなければなりません。 orderを利用して論理的並び替えを行うのは適正ではありませんので注意してください。
<h4>Holy Grail Layout</h4>
<a title="index" href="http://itstudio.co/wp-content/uploads/2014/08/index.svg"><img class="alignnone size-medium wp-image-3059" src="http://itstudio.co/wp-content/uploads/2014/08/index.svg" alt="index" /></a>
[html]
<header>...</header>
<div id="main"><article>...</article><nav>...</nav><aside>...</aside></div>
<footer>...</footer>In this page the header is at the top and the footer at the bottom, but the article is in the center, flanked by the nav on the right and the aside on the left.
[/html]
このレイアウトは,flexレイアウトにより容易に得られます。
[css]
#main { display: flex; }
#main &gt; article { order: 2; min-width: 12em; flex: 1; }
#main &gt; nav { order: 1; width: 200px; }
#main &gt; aside { order: 3; width: 200px; }

追加の特典として、一連の columnは、既定で縦幅が等しく揃えられるようになり、主内容はスクリーンを埋める必要に応じた幅に調整されます。 加えて、Media Queriesと組み合わせることにより、狭いスクリーン幅の下ではすべてを縦方向にレイアウトするように切り替えることも可能になります。

@media all and (max-width: 600px) {
/* 3 本の column には狭過ぎるときのサポート */
#main { flex-flow: column; }
#main &gt; article, #main &gt; nav, #main &gt; aside {
/* 文書順に戻す */
order: 0; width: auto;
}
}

flexライン

flexコンテナ内の一連の flexアイテムは、一連の flexライン( “行” )の中へ配置され, 整列されます。 flexコンテナは、 flex-wrapプロパティの設定で単一行にも複数行にもすることができます。

単一行flexコンテナは、そのすべての子をそれらの内容が overflow したとしても単独のライン内に配置します。
複数行flexコンテナは、その一連の flexアイテムを既存の行に収めるには幅が広過ぎるときには,テキストが改行で折り返されるのと同様に、複数の行に分断されます。 追加の一連の行が作成される際には、flex-wrapプロパティに従ってそれらは flexコンテナの中でレイアウトの方向へ並びます。 flexコンテナ自身が完全に空でない限り、どの行も少なくとも1個の flexアイテムを包含することになります。

横方向に収まり切らない 4 個のボタンの例です
サンプル

<style>
#flex {
display: flex;
flex-flow: row wrap;
width: 300px;
}
.item {
width: 80px;
}
</style>

<div id="flex">
<div class='item'>1</div>
<div class='item'>2</div>
<div class='item'>3</div>
<div class='item'>4</div>
</div>

コンテナは 300px 幅なので、単独のラインには 3 個までのアイテムしか収まりません。 3個のボタンは 240pxを占めて残りの空間に 60px が残されます。 flex-flow プロパティの値には複ライン flex コンテナを指定する wrap キーワードが現れているので、 flex コンテナは,最後のアイテムを包含するための追加のラインを作成することになります。

内容が2つの行に分断されたなら、各行は独立に配置されます。 flexible長、および justify-content, align-self プロパティは、個別の行ごとにその一連のアイテムに対し適用されます。

flex コンテナが複数の行を持つ下では、各行の高さは,その行の一連の flexアイテムを( align-self による整列の後で)包含するために必要な最小のサイズになり、各行はalign-contentプロパティにより flexコンテナ内で整列されます。
flexコンテナに(複数行のものも含め)行が単一行の場合、その行の高さは flexコンテナの高さになり, align-contentは効果を持ちません。 行の横幅はflexコンテナの内容ボックスの横幅と常に同じになります。

flex: autoを使用したサンプル

Flexibility

flexレイアウトには、要素をflexプロパティでにflexコンテナにして、レイアウトの方向にできる空間を埋めるための横幅/縦幅を決定する機能があります。 flexコンテナは、その一連のアイテムに対しそれらの flex 伸長係数に比例する分の free 空間を配分したり 、あるいは overflow させないようにするために,それらの flex 縮短係数に比例する分だけ縮短します。

flex Shorthand

名前 flex
値 none | auto | [ <‘flex-grow’> <‘flex-shrink’>? || <‘flex-basis’> ]
初期値 個々のプロパティを参考
適用対象 flex アイテム
継承 個々のプロパティを参考
媒体 visual
算出値 個々のプロパティを参考
正準的順序 文法に従う

flex プロパティは、 flexible長の各種成分[ flex 伸長係数, flex 縮短係数, flex 基底 ]を指定します。 ボックスが flexアイテムであるときの,その主サイズの決定には、主サイズプロパティの代わりに flexが調べられます。 ボックスが flexアイテムでない場合flexは効果を持ちません。

flex-grow
flex-growプロパティを設定してflex伸長係数を指定します。 それは、flexコンテナの中で正のfree空間が配分される際にflexアイテムが他の一連のflexアイテムに比してどれだけ伸長することになるのかを決定します。 省略された場合は1に設定されます。
flex-shrink
flex-shrinkプロパティを設定してflex縮短係数を指定します。 それは、flexコンテナの中で負のfree空間が配分される際にflexアイテムが他の一連の flexアイテムに比してどれだけ縮短することになるのかを決定します。 省略されたときは1に設定されます。 負のfree空間を配分する際には、 flex縮短係数は,flex基底との積がとられます。
flex-basis
この成分は widthプロパティと同じ範囲の値をとることができます。 flex-basisプロパティを設定してflex基底を指定します。 それは、一連の flex係数に従ってfree空間が配分される前のflexアイテムの初期サイズを与えます。 flex簡略形プロパティから省略されたときの指定値は0%になります。

auto

キーワード auto は,1 1 main-size に展開されます。
none

キーワード none は,0 0 main-size に算出されます。

flex の個々の成分の初期値による値は、 flex: 0 1 main-size に等価になります。

注記: flex 簡略形プロパティから省略されたときの, flex-grow, flex-basis の初期値は、いずれも,それらの個別の下位プロパティの既定値とは異なる。 これは,最もよくある事例に,flex 簡略形プロパティがより良く適応できるようにするために、そのようにされている。

[ 2 個の flex 係数 ]が前置されていない,単位の無いゼロは、 flex 係数として解釈されなければならない。 誤解釈や無効な宣言を避けるため、作者は,単位を伴うゼロ <‘flex-basis’> 成分を指定するか, あるいは その前に 2 個の flex 係数を置かなければならない。

flexによく用いられる値

最もよく用いられる flex値の効果を要約した一覧

flex: 0 main-size
flex: initial
flex: 0 1 main-size に等価(これが初期値)。 width / height プロパティに基づいてアイテムをサイズします。 (アイテムの主サイズプロパティが auto に算出される場合、これは,flex アイテムをその内容に基づいてサイズすることになります。) 正の free空間があるときはflexアイテムをflexibleでなくする一方で、十分な空間がないときはその min-sizeへの縮短を許容します。 整列の機能や autoマージンを利用すれば、一連の flex アイテムをフローする方向に沿って整列させられます。
flex: auto
flex: 1 1 main-size に等価。 width / height プロパティに基づいてアイテムをサイズしつつ, フローする方向のfree空間を吸収させるために、それらを完全に flexibleにします。 どのアイテムもflexが[ auto, initial, none ]のいずれかである場合、それらのアイテムがサイズされた後の正のfree 空間はflex: autoを伴うアイテムに均等に配分されることになります。
flex: none
flex: 0 0 main-size に等価。 この値は、 width / height プロパティに従ってアイテムをサイズしつつ,flexアイテムを完全に非flexible にします。 これは、overflowが生じる状況下でも 一連の flex アイテムに対する縮短が許容されないことを除いてinitialと同様です。
flex:positive-number
flex:positive-number 1 0% に等価。 flexアイテムをflexibleにしてflex基底をゼロに設定します。 その結果、アイテムは指定された比例分による[ flex コンテナの中の free 空間 ]を受け取ります。 flexコンテナの中のすべてのアイテムがこのパタンを利用している下でのそれらのサイズは、flex係数に指定された値に比例するようになります。

既定では、 flex アイテムがその内容の最小サイズ(単語や固定サイズの要素の最長の長さ)を下回るまで縮短することはありません。 このふるまいを変えるには、 min-width や min-height プロパティ を設定します。

Components of Flexibility

Flexibilityの個々の成分は,下位プロパティにより独立に制御できます。

*成分によるプロパティよりも, flexショートハンドを用いてFlexibilityを制御することが推奨されています。 このショートハンドプロパティは、一般用途に適応するように,未指定の成分を正しく再設定してくれます。

flex-grow プロパティ

名前 flex-grow

初期値 0
適用対象 flex アイテム
継承 されない
媒体 visual
算出値 指定値
アニメーション 可
flex-grow プロパティは、 flex 伸長係数を 供された に設定する。 負数は無効です。

flex-shrink プロパティ

名前 flex-shrink

初期値 1
適用対象 flex アイテム
継承 されない
媒体 visual
算出値 指定値
アニメーション 可
flex-shrink プロパティは、 flex 縮短係数を 供された に設定する。 負数は無効です。

flex-basis プロパティ

名前 flex-basis
値 main-size | <‘width’>
初期値 main-size
適用対象 flexアイテム
継承 されない
媒体 visual
算出値 指定値 — ただし,長さは絶対化される。
百分率 flex コンテナの内縁 主サイズに相対的
アニメーション width と同様

flex-basisプロパティは、横方向のフローではflexアイテムの幅を決めます。 それは width, height プロパティと同じ値の範囲を使用することができます。

main-size キーワードが flexアイテムに指定された場合、flexアイテムのサイズ値を取得します。

flexベースラインは、横書き書字モードの下では、widthと同じ方法で解決されます。 flex-basisの百分率値はflex アイテムの包含ブロック、すなわちその flexコンテナに対し解決され、 その包含ブロックのサイズが不定である場合の結果は auto による主サイズと同じになります。 同様にflex-basisは、box-sizingなど他から指定されない限り,内容ボックスのサイズを決定します。

整列

flexコンテナの内容がそれらのflex処理を終えて、すべてのflexアイテムについてflexコンテナ内で整列させることができます。
flexアイテムは CSS 2.1 の下では非常に困難であった縦横、両方向の中央寄せなども含むよく用いられる多種の整列を行うことができます。

autoマージンによる整列法

flexアイテム上のautoマージンの効果は、ブロックフローの下でのautoマージンととてもよく似ています。

flexベースライン、flexible長の計算を行う間はautoマージンは0と見なされます。

justify-content、align-selfによる整列に先立って、正のfree空間はその次元に属するautoマージンに配分されます。

overflowする一連のボックスは、それらのフローする方向のautoマージンはoverflowを無視します。

*free 空間が auto マージンに配分される場合、各種整列プロパティは、その方向においては効果を持たなくなります。 マージンはflex処理の後に残されたすべてのfree空間を奪うことになるからです。

autoマージンの用途の一つに、一連のflexアイテムを主軸の中で別々の “一連のグループ” に分けることが挙げられます。

auto マージンのサンプル

<style>
nav > ul {
display: flex;
}
nav > ul > li {
min-width: min-content;
/* アイテムがその内容に比して小さくなり過ぎない様にする */
}
nav > ul > #login {
margin-left: auto;
}
</style>
<nav>
<ul>
<li><a href=/about>About</a>
<li><a href=/projects>Projects</a>
<li><a href=/interact>Interact</a>
<li id='login'><a href=/login>Login</a>
</ul>
</nav>

フローした方向(横フローに場合水平方向)の整列〜justify-contentプロパティ

名前 justify-content
値 flex-start | flex-end | center | space-between | space-around
初期値 flex-start
適用対象 flex コンテナ
継承 されない
媒体 visual
算出値 指定値

justify-content サンプル

justify-content プロパティは、flexコンテナのフローの向きに従ってflexアイテムを整列します。 これは、flexible長およびautoマージンが解決された後に行われます。

flex-start
flexアイテムはラインの開始点に向けて収まります。 通常の横並びの場合は、左寄せになります。
flex-end
flexアイテムはラインの終端に向けて収納されます。通常の横並びの場合は、右寄せになります。
center
flexアイテムはラインの中央に向けて収納されます。通常の横並びの場合は、中央寄せになります。
space-between
flexアイテムはライン内に均等に分布されます。
space-around
flexアイテムは、両端には半分サイズの空間を伴う様に、ライン内に均等に分布されます。

横フローの場合垂直方向の整列〜align-items と align-selfプロパティ

名前 align-items
値 flex-start | flex-end | center | baseline | stretch
初期値 stretch
適用対象 flex コンテナ
継承 されない
媒体 visual
算出値 指定値
名前 align-self
値 auto | flex-start | flex-end | center | baseline | stretch
初期値 auto
適用対象 flex アイテム
継承 されない
媒体 visual
算出値 auto は 親の align-items 値に算出される。 他の値については,指定値。

align-itemsサンプル

flexコンテナのラインの中の一連のflexアイテムは、justify-contentと同様に、ラインの垂直方向に整列させることができます。 align-itemsは、匿名flexアイテムも含めてflexコンテナのflexアイテムすべてに対する既定の整列を設定します。 align-self は、この既定の整列を個々のflexアイテムについて上書きできるようにします。

flexアイテムの垂直方向のマージンがいずれもautoである場合、align-self は効きません。

align-selfに対する値autoは、要素が親を持つならばその親上のalign-itemsの値を、持たないならばstretchに算出されます。

各種整列は次の様に定義されます。

flex-start
flexアイテムは上端揃えになります。
flex-end
flexアイテムは下端揃えになります。
center
flexアイテムは垂直方向の中央揃えになります。
baseline
flexアイテムは一番最初のflexアイテムのbaseline揃えになります。
stretch
flexアイテムは伸張されます。 その場合の使用値は[ min-height / min-width / max-height / max-width ]による制約の下で,[ 横フローの場合、そのアイテムのマージンボックスの縦サイズがそのラインと同じサイズに可能な限り近くされる ]ような長さになります。

flexラインの収納法〜 align-contentプロパティ

名前 align-content
値 flex-start | flex-end | center | space-between | space-around | stretch
初期値 stretch
適用対象 複ライン flexコンテナ
継承 されない
媒体 visual
算出値 指定値

align-content サンプル

align-contentプロパティは、横フローの場合、縦側に余った空間があるときにflexコンテナの一連のラインをflexコンテナの中で整列します。 — justify-content が個々のアイテムをフローする中で整列するときと同様です。 このプロパティはflexコンテナが単独のラインのみからなるときには効果を持たないことに注意してください。

flex-start
一連のラインはflexコンテナの始端に向けて収納されます。
flex-end
一連のラインは,flex コンテナの終端に向けて収納されます。
center
一連のラインは,flex コンテナの中央に向けて収納されます。
space-between
一連のラインは、 flex コンテナの中で均等に分布されます。
space-around
一連の flex アイテムは、両端には半分サイズの空間を伴う様にflexコンテナの中で均等に分布されます。
stretch
一連のラインは、残りの空間を占めるように伸張されます。

flexベースライン

flexコンテナのベースラインは、( order による並び替えの後で)次の様にして決定されます。

main axisのベースライン

flexコンテナの最初のライン上にベースライン整列に関与するflexアイテムが在るならば、それらの flexアイテムのベースラインが,flexコンテナのmain axisのベースラインになります。

他の場合、 flexコンテナが 1 個以上のflexアイテムを持ち、かつその最初のflexアイテムのベースラインがflexコンテナのmain axisに平行であるならば、その基底線がflexコンテナのmain axisベースラインになります。

他の場合、flexコンテナのmain axisベースラインは,その最初のアイテムの内容ボックスから合成されるか、あるいはそれができない場合はflexコンテナの内容ボックスによるものにされます。

cross-axis ベースライン

flexコンテナが 1 個以上の flexアイテムを持ち、かつ その最初のflexアイテムのベースラインがflexコンテナのレイアウト方向の縦側に平行であるならば、そのベースラインがflexコンテナのcross-axis ベースラインになります。

他の場合、 flexコンテナのcross-axis ベースラインはその最初のアイテムの内容ボックスから合成されるか、あるいは,それができない場合はflexコンテナの内容ボックスによるものにされます。

上述の規則に従ってベースラインを計算する際に、ベースラインを供与するボックスがスクロールを許容するoverflow 値を持つ場合、そのボックスはそのベースラインの決定の目的においてはその初期スクロール位置にあるものと見なされます。

table cell のベースラインの決定の際には、行ボックスやtable-row [CSS21] の時とちょうど同じ様にflexコンテナがベースラインを提供します。