フレックスコンテナを使用してボックスをcssに揃えます。 Flexbox AlignmentFlexアイテムについて知っておくべきことすべて

Flexboxマークアップモジュール（ 英語のフレキシブルボックスから-フレキシブルブロック）、これは現在「 考えられる推奨事項»W3C標準化（ W3C候補の推奨事項）サイズが不明であるか動的に決定されている場合でも、コンテナ内の要素間でスペースをマークアップ、整列、および分散するためのより効率的な方法を提供することを目的としています（ それが「フレキシブル」と呼ばれた理由です).

柔軟なレイアウトの背後にある主なアイデアは、コンテナに要素の高さ/幅（および順序）を変更して、使用可能なスペースを最適に埋める機能を提供することです（ 主にすべての種類とサイズの画面をサポートするため).

フレックスコンテナは、アイテムを引き伸ばして空き領域を埋めるか、アイテムを縮小して範囲外にならないようにします。

最も重要なことは、Flexboxのレイアウトは、通常のレイアウトとは対照的に、方向に依存しないことです（ 垂直方向のブロックと水平方向のインライン要素).

通常のマークアップ要素はページには適していますが、柔軟性に欠けています（ これは言葉遊びではありません）大規模で複雑なアプリケーションをサポートする（ 特に、向き、寸法、ストレッチ、シュリンクなどの変更に関しては).

注：Flexboxマークアップは、アプリケーションコンポーネントや小さなレイアウトに最適ですが、グリッドベースのマークアップは大規模なレイアウトに最適です。

基本的な概念と用語

Flexboxはモジュール全体であり、個別のプロパティではないため、プロパティのセット全体を含む多くの要素が含まれています。 それらのいくつかは、コンテナに適用することを目的としています（ フレックスコンテナと呼ばれる親要素）、他の人は子供に適用する必要があります（ それらをフレックスアイテムと呼びましょう).

従来のマークアップはボックスとインラインの方向に基づいていますが、フレックスマークアップはフレックスフローの方向に基づいています。 フレックスマークアップの背後にある基本的な考え方を説明するには、仕様から下の図を参照してください。

基本的に、要素は主軸に沿って配置されます（ ポイントメインスタートからメインエンドまで）、または横軸に沿って（ クロススタートポイントからクロスエンドまで):

• 主軸は、フレックスアイテムが配置されるフレックスコンテナの主軸です。 注意してください。水平である必要はありません。その位置はflex-directionプロパティによって異なります（以下を参照）。
• メインスタート| メインエンド-フレックスアイテムはコンテナ内に配置され、メインの開始点から始まり、メインの終了点に到達します。
• メインサイズは、メインサイズに応じて、フレックスアイテムの幅または高さです。 main sizeプロパティは、widthまたはheightに設定できます。
• 交差軸-主軸に垂直な交差軸。 その方向は主軸の方向に依存します。
• クロススタート| クロスエンド-フレックスラインはアイテムで満たされ、クロススタート側からクロスエンド側に向かってコンテナに配置されます。
• クロスサイズ-選択した寸法に応じて、フレックスアイテムの幅または高さ。 プロパティは、横方向の寸法の幅または高さのいずれかの値を持つことができます。

親クラスのプロパティ（フレックスコンテナ）

画面

このプロパティは、設定された値に応じて、フレックスコンテナ（インラインまたはブロック）を定義します。 また、すべての直接の子孫にフレックスコンテキストを使用できます。

コンテナ（表示：flex; / *またはinline-flex * /）

CSS列はフレックスコンテナでは効果がないことに注意してください。

フレックス方向

このプロパティは、フレックスコンテナにフレックスアイテムが配置される方向を決定する主軸を設定します。 Flexbox（ オプションのラッピングを除く）は一方向マークアップの概念です。

フレックスアイテムが主に水平列または垂直列のいずれかに配置されていると想像してください。

コンテナ（flex-direction：row | row-reverse | column | column-reverse;）

• 行（デフォルト）：ltrの場合は左から右。 rtlの場合は右から左。
• 行-逆：ltrで右から左へ; rtlの場合は左から右。
• 列：行と同じですが、上から下へ。
• column-reverse：row-reverseと同じですが、下から上へ。

フレックスラップ

デフォルトでは、フレックスアイテムは1行に絞り込もうとします。 これを変更し、必要に応じてこのプロパティで要素をラップできます。 新しい線が配置される方向もここで役割を果たします。

コンテナ（flex-wrap：nowrap | wrap | wrap-reverse;）

• nowrap（デフォルト）：ltrの場合は1行/左から右。 rtlの場合は右から左。
• 折り返し：ltrの場合は複数行/左から右。 rtlの場合は右から左。
• wrap-reverse：マルチライン/右から左へのltr; rtlの場合は左から右。

フレックスフロー（フレックスコンテナの親に適用）

これは、flex-directionプロパティとflex-wrapプロパティの省略形であり、フレックスコンテナの主軸と交差軸を一緒に定義します。 デフォルトは行nowrapです：

フレックスフロー：<‘flex-direction’> || <‘flex-wrap’>

正当化-コンテンツ

このプロパティは、主軸に沿った配置を設定します。 これは、行内のすべてのフレックスアイテムが柔軟性がない、または柔軟性があるが最大サイズに達した場合に、余分な空き領域を割り当てるのに役立ちます。 また、このプロパティを使用すると、要素が線の境界を超えたときに要素の配置を制御できます。

コンテナ（justify-content：flex-start | flex-end | center | space-between | space-around;）

• flex-start（デフォルト）：アイテムは行の先頭に揃えられます。
• フレックスエンド：アイテムは行の終わりに揃えられます
• center：アイテムは線の中心に揃えられます。
• space-between：要素は行内に均等に分散されます：最初の要素は行の先頭に配置され、最後の要素は行の最後に配置されます。
• space-around：アイテムは同じ間隔でライン上に等間隔に配置されます。

アイテムを揃える

このプロパティは、現在の線の交差軸に対してデフォルトでフレックスアイテムを配置する方法を決定します。 これは、正当化コンテンツのクロスアクシスバージョンと考えることができます（ メインに垂直):

コンテナ（align-items：flex-start | flex-end | center | baseline | Stretch;）

• flex-start：クロススタートアイテムの境界はクロススタートライン上にあります。
• フレックスエンド：クロススタートアイテムの境界はクロスエンドライン上にあります。
• 中央：アイテムは交差軸の中央に配置されます。
• ベースライン：要素はベースラインに従って配置されます。
• ストレッチ（デフォルト）：要素はコンテナを満たすためにストレッチします（ 最小幅/最大幅の値を考慮する).

整列-コンテンツ

このプロパティを使用すると、justify-contentプロパティが個々のアイテムを主軸に揃えるのと同じように、交差軸に空きスペースがある場合にフレックスコンテナ内で線を揃えることができます。

注：フレックスアイテムの行が1つしかない場合、このプロパティは機能しません。

コンテナ（align-content：flex-start | flex-end | center | space-between | space-around | Stretch;）

• flex-start：行はコンテナーの先頭に配置されます。
• フレックスエンド：ラインはコンテナの端に配置されます。
• 中央：線はコンテナの中央に配置されます。
• space-between：線は等間隔に配置されます。 最初の行はコンテナの先頭にあり、最後の行は最後にあります。
• スペースアラウンド：線は互いに同じ距離で等間隔に配置されます。
• ストレッチ（デフォルト）：残りのスペースを埋めるために線が引き伸ばされます。

子プロパティ

（フレックスアイテム）

注文

デフォルトでは、フレックスアイテムはソース順に配置されます。 ただし、orderプロパティは、アイテムがフレックスコンテナに表示される順序を制御します。

アイテム（注文： ; }

フレックスグロー

このプロパティにより、フレックスアイテムを必要に応じて「成長」させることができます。 それは、比率として機能する無次元の値を取ります。 この値は、アイテムが占有できるフレックスコンテナ内の使用可能なスペースの量を決定します。

すべてのアイテムのflex-growが1に設定されている場合、各子アイテムはコンテナー内で同じサイズに設定されます。 子の1つを2に設定すると、他の子の2倍のスペースが必要になります。

アイテム（フレックスグロー： ; / *デフォルト0 * /）

フレックスシュリンク

このプロパティにより、フレックスアイテムは必要に応じて縮小されます。

アイテム（フレックスシュリンク： ; / *デフォルト1 * /）

負の数は許可されていません。

フレックスベース

このプロパティは、残りのスペースを割り当てる前に、要素のデフォルトサイズを決定します。

アイテム（フレックスベース： | 自動; / *デフォルトは自動* /）

フレックス

このプロパティは、flex-grow、flex-shrink、およびflex-basisの組み合わせの省略形です。 2番目と3番目のパラメーター（flex-shrinkとflex-basis）はオプションです。 デフォルト値：0 1自動：

アイテム（フレックス：なし| [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

整列-自己

このプロパティを使用すると、デフォルトの配置を上書きできます（ またはalign-itemsプロパティで定義）個々のフレックスアイテム用。

使用可能な値は、align-itemsプロパティの説明に記載されています：

アイテム（align-self：auto | flex-start | flex-end | center | baseline | Stretch;）

float、clear、vertical-alignはフレックス要素では機能しないことに注意してください。

の例

非常に簡単な例から始めましょう。ほぼ毎日の問題、つまり完全な中心の位置合わせを解決します。 フレックスボックスを使用するのは簡単ではありません。

親（表示：フレックス;高さ：300px; / *または何でも* /）。child（幅：100px; / *または何でも* /高さ：100px; / *または何でも* /マージン：自動; / *マジック！* / ）

この例は、autoに設定されたmarginプロパティが余分なスペースを消費するという事実に基づいています。 したがって、このインデントを設定すると、要素が両方の軸の中心に正確に配置されます。

次に、さらにいくつかのプロパティを使用しましょう。 6つの要素のリストがあり、それらはすべて固定サイズであるとします（ 美学のために）、ただし自動入力のオプションがあります。

ブラウザウィンドウのサイズが変更されたときにすべてが見栄えがするように、水平軸に沿って等間隔で配置する必要があります（ メディアクエリを使用せずに):

Flex-container（/ *最初にflexレイアウトコンテキストを作成します* / display：flex; / *次に、流れの方向を定義し、アイテムをラップするかどうかを定義します。*これは次と同じであることに注意してください。* flex-direction：row; * flex-wrap：wrap; * / flex-flow：row wrap; / *ここで、残りのスペースを割り当てる方法を定義します* / justify-content：space-around;）

準備！ 残りはすべてすでに設計上の問題です。 これがこの例のデモです。 リンクをたどり、ウィンドウのサイズを変更して、何が起こるかを確認してください。

HTML：

CSS：

Flex-container（padding：0; margin：0; list-style：none; display：-webkit-box; display：-moz-box; display：-ms-flexbox; display：-webkit-flex; display：flex; -webkit-flex-flow：row wrap; justify-content：space-around;）。flex-item（background：tomato; padding：5px; width：200px; height：150px; margin-top：10px; line-height： 150px;色：白;フォントの太さ：太字;フォントのサイズ：3em;テキストの配置：中央;）

もう1つ試してみましょう。 Webサイトの最上部に右揃えのナビゲーションメニューがあるが、中型の画面と小さなデバイスの1つの列の中央に配置したいとします。 すべてが非常に簡単です：

CSS：

/ *大画面* / .navigation（display：flex; flex-flow：row wrap; / *アイテムを主軸に沿って行の終わりに揃えます* / justify-content：flex-end;）/ *中画面* / @media all and（max-width：800px）（。navigation（/ *中程度の画面の場合、要素を中央に配置して、要素間に空き領域を均等に分散します* / justify-content：space-around;））/ *小さな画面* / @media all and（max-width：500px）（。navigation（/ *小さい画面の場合、行方向ではなく列方向を使用します* / flex-direction：column;））

HTML：

• 家
• 私たちに関しては
• 製品
• 連絡先

CSS：

ナビゲーション（リストスタイル：なし;マージン：0;背景：deepskyblue;表示：-webkit-box;表示：-moz-box;表示：-ms-flexbox;表示：-webkit-flex;表示：flex; -webkit -flex-flow：row wrap; justify-content：flex-end;）。navigation a（text-decoration：none; display：block; padding：1em; color：white;）。navigation a：hover（background：darken（ deepskyblue、2％）;）@ media all and（max-width：800px）（.navigation（justify-content：space-around;））@media all and（max-width：600px）（。navigation（-webkit- flex-flow：column wrap; flex-flow：column wrap; padding：0;）。navigation a（text-align：center; padding：10px; border-top：1px solid rgba（255,255,255,0.3）; border-bottom： 1px solid rgba（0,0,0,0.1）;）。ナビゲーションli：最後のタイプa（border-bottom：none;））

フレックスアイテムの「しなやかさ」をいじって、もっと上手くやってみましょう。 全幅のヘッダーとフッターを備えた3列のモバイルレイアウトはどうですか？ そして、ソースコードによって与えられた順序に依存しない要素の出力で：

CSS：

ラッパー（表示：フレックス;フレックスフロー：行ラップ;）/ *すべてのアイテムを100％幅に設定* / .header、.main、.nav、.aside、.footer（flex：1 100％;）/ * Inこの場合、モバイルデバイスをターゲットにするために元の順序に依存します：* 1。タイトル* 2。ナビゲーション* 3。本文* 4。サイドバー* 5。フッター* / / *中画面* / @media all and（min -width ：600px）（/ *両方のサイドバーが同じ行にあります* / .aside（flex：1 auto;））/ *大画面* / @media all and（min-width：800px）（/ *表示順序を反転します最初のサイドバーと本体、および2つのサイドバーの最大2倍のスペースを占めるようにメイン要素に指示します* / .main（flex：2 0px;）。aside-1（order：1;）。main（order ：2;）。aside-2（順序：3;）。footer（順序：4;））

HTML：

CSS：

ラッパー（表示：-webkit-box;表示：-moz-box;表示：-ms-flexbox;表示：-webkit-flex;表示：flex; -webkit-flex-flow：行の折り返し; flex-flow：行の折り返し; font-weight：bold; text-align：center;）。wrapper> *（padding：10px; flex：1 100％;）。header（background：tomato;）。footer（background：lightgreen;）。main（text -align：left; background：deepskyblue;）。aside-1（background：gold;）。aside-2（background：hotpink;）@ media all and（min-width：600px）（。aside（flex：1 auto; ））@ media all and（min-width：800px）（。main（flex：2 0px;）。aside-1（order：1;）。main（order：2;）。aside-2（order：3; ）.footer（注文：4;））

フレックスボックスプレフィックスの使用

Flexboxでは、ほとんどのブラウザでベンダープレフィックスをサポートする必要があります。 これには、プロパティの前にベンダープレフィックスを使用するだけでなく、まったく異なるプロパティ名と値を使用することも含まれます。

これは、フレックスボックスの仕様が時間の経過とともに進化し、「古い」、「トゥイナー」、および「新しい」バージョンが作成されたためです。

おそらく、この状況から抜け出す最善の方法は、新しい（そして最終的な）構文を使用してコードを記述し、ロールバックを非常にうまく処理するAutoprefixerを介してCSSを実行することです。

あるいは、以下はいくつかのプレフィックスのヘルプのためのSassメソッド@mixinであり、これはまた、どのようなアクションを取るべきかについてのアイデアを提供します：

SCSS：

@mixin flexbox（）（display：-webkit-box; display：-moz-box; display：-ms-flexbox; display：-webkit-flex; display：flex;）@ mixin flex（$ values）（-webkit- box-flex：$ values; -moz-box-flex：$ values; -webkit-flex：$ values; -ms-flex：$ values; flex：$ values;）@ mixin order（$ val）（-webkit- box-ordinal-group：$ val; -moz-box-ordinal-group：$ val; -ms-flex-order：$ val; -webkit-order：$ val; order：$ val;）。wrapper（@include flexbox（）;）。item（@include flex（1 200px）; @include order（2）;）

ブラウザのサポート

フレックスボックスの「バージョン」で次のように分類されます。

• （新規）-仕様からの最新の構文のサポートを意味します（たとえば、 表示：フレックス;

  ::プレースホルダーの色の疑似要素（または場合によっては疑似クラス）を使用すると、フォーム要素のテキストコンテンツを指定できます。 プレースホルダー属性を使用して設定されます。 .

コンテンツ：

Flexboxページ上にブロックを配置する新しい方法です。 これは、フロートではなく、要素のレイアウト用に特別に作成されたテクノロジーです。 を使用して Flexbox要素を水平方向と垂直方向に簡単に配置したり、要素の方向と順序を変更したり、ブロックを親の高さ全体に伸ばしたり、下端に釘付けしたりできます。

2017年2月2日からのUPD：仕様からのライブデモと説明を含む、便利なflexboxチートシートを作成しました：Flexboxチートシート。

例では、新しい構文のみを使用しています。 この記事の執筆時点では、これらはで最も正確に表示されています。 クロム..。 Firefoxでは部分的に機能しますが、Safariではまったく機能しません。

caniuse.comによると、 Flexbox IE8および9とOperaMiniではサポートされておらず、他のブラウザではすべてのプロパティやプレフィックスが必要なわけではありません。

これは、この技術が現在広く使用されていないことを意味しますが、それをよりよく知るための時間です。

まず、フレックスアイテムが軸に沿って配置されていることを知っておく必要があります。 デフォルトでは、アイテムは水平方向に配置されます-に沿って 主軸-主軸。

また、使用する際には注意が必要です。 Flexbox float、clear、vertical-alignは、テキストの列を設定するプロパティだけでなく、内部ブロックでも機能しません。

実験のための試験場を準備しましょう：

1つの親ブロック（黄色）と5つの子。

ディスプレイ：フレックス

そして、display：flexを親要素に追加します。 ..。 内部divは、コンテンツに関係なく、同じ高さの列に（主軸に沿って）並んでいます。

表示：フレックス; すべての子供を柔軟にします-元々のようにインラインまたはブロック状ではなく、柔軟にします。

親ブロックにラッパーのない画像またはテキストが含まれている場合、それらは匿名のフレックスアイテムになります。

のプロパティを表示します Flexbox 2つの値を取ることができます：

flex-ブロック要素のように動作します。 ブロックの幅を計算するときは、レイアウトが優先されます（ブロックの幅が不十分な場合、コンテンツが境界線から這い出てしまう可能性があります）。

inline-flex-inline-blockのように動作します。 コンテンツの優先度（コンテンツはブロックを必要な幅に拡張して、線ができるだけ収まるようにします）。

フレックス方向

ボックスのレイアウト方向は、flex-directionプロパティによって制御されます。

可能な値：

行-行（デフォルト値）; row-reverse-逆の順序の要素を持つ行。 列-列; column-reverse-逆の順序の要素を持つ列。

行と行の逆

列と列-逆

フレックスラップ

1行に多くのブロックが存在する可能性があります。 それらがラップするかどうかは、flex-wrapプロパティによって決定されます。

可能な値：

nowrap-ブロックはラップされません（デフォルト）。 wrap-ブロックはラップされます。 wrap-reverse-ブロックは逆の順序でラップおよび配置されます。

flex-directionプロパティとflex-wrapプロパティを簡単に記述するために、flex-flowというプロパティがあります。

可能な値：両方のプロパティまたは1つだけを設定できます。 例えば：

フレックスフロー：カラム; フレックスフロー：ラップリバース; フレックスフロー：カラムリバースラップ;

行-逆ラップ-逆のデモ：

注文

orderプロパティは、ブロックの順序を制御するために使用されます。

可能な値：数値。 ブロックを最初に配置するには、順序：-1を設定します。

正当化-コンテンツ

アイテムを整列するためのいくつかのプロパティがあります：justify-content、align-items、およびalign-self。

justify-contentとalign-itemsは親コンテナーに適用され、align-selfは子に適用されます。

justify-contentは、主軸との位置合わせを担当します。

justify-contentの可能な値：

flex-start-アイテムは主軸の先頭から整列されます（デフォルト）。 flex-end-アイテムは主軸の端から整列されます。 center-アイテムは主軸の中心に揃えられます。 space-between-要素は主軸に沿って配置され、要素間に空きスペースを分散します。 space-around-アイテムは主軸に沿って配置され、アイテムの周りに空きスペースを分散します。

フレックススタートとフレックスエンド

スペース-間、スペース-周り

アイテムを揃える

align-itemsは、垂直軸の位置合わせを担当します。

align-itemsの可能な値：

flex-start-アイテムは垂直軸の始点から整列されます。 flex-end-アイテムは垂直軸の端から整列されます。 center-アイテムは中央に配置されます。 ベースライン-要素はベースラインに揃えられます。 ストレッチ-要素は、垂直軸に沿ったすべてのスペースを埋めるようにストレッチされます（デフォルト）。

フレックススタート、フレックスエンド

ベースライン、ストレッチ

自分を揃える

align-selfは垂直軸の位置合わせも行いますが、個々のフレックスアイテムに設定されます。

可能なalign-self値：

autoがデフォルトです。 要素が親要素のalign-itemsを使用することを意味します。 flex-start-アイテムは垂直軸の始点から整列されます。 flex-end-アイテムは垂直軸の端から位置合わせされます。 center-要素は中央に配置されます。 ベースライン-要素はベースラインに揃えられます。 ストレッチ-要素は、高さ全体を満たすように引き伸ばされます。

コンテンツの整列

複数行のフレックスコンテナ内の配置を制御するために、align-contentプロパティがあります。

可能な値：

flex-start-アイテムは主軸の始点から整列されます。 flex-end-アイテムは主軸の端から整列されます。 center-アイテムは主軸の中心に揃えられます。 space-between-要素は主軸に沿って配置され、要素間に空きスペースを分散します。 space-around-要素は主軸に沿って配置され、それらの周りに空きスペースを分散します。 ストレッチ-要素は、高さ全体を満たすようにストレッチします（デフォルト）。

フレックススタート、フレックスエンド

センター、ストレッチ

スペース-間、スペース-周り

追伸：たとえば、行flex-flow：column wrapまたは同じflex-direction：column;の完全なレコードなど、実際には確認できなかったものがいくつかあります。 フレックスラップ：ラップ; ..。

要素は積み重ねられますが、運ばれません：

flex-direction：column;の場合、ラップは発生しません。 、仕様では次のようになりますが、次のようになります。

時間の経過とともに機能すると思います。

2014年6月21日からのUPD：ブロックに高さを与えると、すべてが機能します。 ヒントをありがとう

Flexbox Layout（Flexible Box）モジュールは、サイズが不明または動的（したがって「フレックス」という言葉）の場合でも、コンテナ内のアイテム間で空きスペースを配置、整列、および分散するためのより効率的な方法を提供することを目的としています。

フレックスレイアウトの背後にある基本的な考え方は、利用可能なスペースを最適に埋めるために（主にすべてのタイプとサイズの画面に収まるように）、コンテナにアイテムの幅/高さ（および順序）を変更する機能を与えることです。 フレックスボックスコンテナは、アイテムを拡張して空き領域を埋めるか、アイテムを縮小してオーバーフローを回避します。

最も重要なことは、Flexboxは、従来のレイアウト（垂直位置に基づくボックスと水平位置に基づくインライン要素）とは異なり、方向に依存しないことです。 それらは十分に機能しますが、大規模または複雑なアプリケーションをサポートする柔軟性に欠けています（特に、方向の変更、サイズ変更、拡大、縮小などに関して）。

ノート。 Flexboxはアプリケーションコンポーネントや小さなレイアウトに適していますが、CSSグリッドは大きなレイアウトに適しています。

基本と用語

Flexboxはモジュール全体であり、個別のプロパティではないため、多数のプロパティを含むさまざまなものが含まれています。 コンテナ（「フレックスコンテナ」と呼ばれる親）に設定されるように設計されているものもあれば、子（「フレックスアイテム」と呼ばれる）に設定されるように設計されているものもあります。

従来のレイアウトシステムはボックスとインラインの方向に基づいていますが、Flexboxは「フレックスフローの方向」に基づいています。 Flexboxの背後にある基本的な考え方を説明するために、仕様からこの図を見てください。

基本的に、要素はに沿って配置されます 主軸（メインスタートからメインエンドまで）または 横軸（クロススタートからクロスエンドまで）。

ブラウザのサポート

CSSフレキシブルボックスレイアウトモジュール

Chrome for Android

バージョン10以降のBlackberryブラウザーは、新しい構文をサポートします。

コンテナのプロパティ

要素のプロパティ

親のプロパティ（フレックスコンテナ）

画面

フレックスコンテナを定義します。 文字列またはブロックは、渡された値によって異なります。 すべての直接の子のフレックスコンテキストが含まれています。

コンテナ（表示：flex; / *またはinline-flex * /）

CSS列はフレックスコンテナに影響を与えないことに注意してください。

フレックス方向

主軸を設定し、コンテナ内にある要素の方向を決定します。 Flexbox（オプションのラッパーを除く）は、一方向のレイアウトの概念です。 フレックスアイテムは、主に水平方向の行または垂直方向の列と考えてください。

コンテナ（flex-direction：row | row-reverse | column | column-reverse;）

• 行（デフォルト）-ltrの左から右へ。 rtlで右から左へ;
• 行反転-ltrで右から左へ; rtlで左から右へ;
• 桁-行と同じですが、上から下までです。
• 列反転-行反転と同じですが、下から上にのみです。

フレックスラップ

デフォルトでは、アイテムは1行のみを埋めようとします。 必要に応じて、この動作を変更し、要素を次の行に折り返すことができます。

コンテナ（flex-wrap：nowrap | wrap | wrap-reverse;）

• nowrap（デフォルト）-すべてのフレックスアイテムは1行に配置されます。
• 包む-フレックスアイテムは、上から下に複数の行に配置されます。
• ラップ-リバース-フレックスアイテムは、下から上に複数の行に配置されます。

正当化-コンテンツ

主軸に沿った配置を決定します。 これは、すべての固定および非固定フレックスアイテムが最大サイズに達した後に残った空き領域を分散するのに役立ちます。 また、要素がラインをオーバーフローしたときに、要素の配置をある程度制御するのにも役立ちます。

コンテナ（justify-content：flex-start | flex-end | center | space-between | space-around;）

• フレックススタート（デフォルト）-要素は行の先頭に押し付けられます。
• フレックスエンド-要素は行の終わりまで押されます。
• 中心-アイテムは線に沿って中央に配置されます。
• スペースビトウィーン-要素は線上に均等に配置されます。 最初の要素は行の先頭にあり、最後の要素は行の終わりにあります。
• スペースアラウンド-要素は、周囲に同じスペースがある線上に均等に配置されます。 すべての要素の両側に同じスペースがあるため、視覚的にはスペースが同じではないことに注意してください。 最初の要素はコンテナの側面に1単位のスペースがありますが、次の要素も両側に1単位あるため、コンテナと次の要素の間に2単位のスペースがあります。

アイテムを揃える

このプロパティは、フレックスアイテムが現在の線の交差軸に沿ってどのように動作するかを決定します。 横軸（主軸に垂直）については、ああのように考えてください。

コンテナ（align-items：flex-start | flex-end | center | baseline | Stretch;）

• フレックススタート-要素は横軸の先頭に配置されます。
• フレックスエンド-要素は横軸の端に配置されます。
• 中心 -要素は横軸の中心にあります。
• ベースライン-要素はベースラインに揃えられます。
• ストレッチ（デフォルト）-コンテナ全体を埋めるためにストレッチします（最小幅/最大幅を尊重します）。

整列-コンテンツ

ノート。フレックスアイテムが1行しかない場合、このプロパティは効果がありません。

コンテナ（align-content：flex-start | flex-end | center | space-between | space-around | Stretch;）

• フレックススタート-行はコンテナの先頭にあります。
• フレックスエンド-ラインはコンテナの端にあります。
• 中心-線はコンテナの中央に配置されます。
• スペースビトウィーン-行は均等に分散され、最初の行はコンテナの先頭にあり、最後の行は最後にあります。
• スペースアラウンド-線は均等に分散され、それらの間の距離は同じです。
• ストレッチ（デフォルト）-線は幅全体に広がり、残りのスペースを占有します。

子供のためのプロパティ（フレックスアイテム）

注文

デフォルトでは、すべての要素は元の順序で配置されます。 ただし、orderプロパティは、要素がコンテナ内に配置される順序を制御します。

アイテム（注文： ; }

フレックスグロー

プロパティは、必要に応じて、要素のサイズが大きくなる能力を決定します。 これは、要素が占める必要があるコンテナ内の空き領域を決定する比率として単位のない値を取ります。

すべてのアイテムのflex-growが1に設定されている場合、コンテナー内の空き領域はすべてのアイテムに均等に分散されます。 要素の1つが2の値を持っている場合、その要素は他の要素の2倍のスペースを占有します（少なくとも試行します）。

アイテム（フレックスグロー： ; / *デフォルト0 * /）

負の数は指定できません。

フレックスベース

残りのスペースが割り当てられる前に、要素のデフォルトサイズを決定します。 長さ（20％、5remなど）またはキーワードにすることができます。 autoキーワードは、「私の幅または高さのプロパティのように見える」という意味です。 contentキーワードは、「サイズは要素のコンテンツに基づいている」という意味です。このキーワードはまだ十分にサポートされていないため、テストするのは難しく、兄弟のmin-content、max-content、fit-contentを知るのはさらに困難です。やっている。

アイテム（フレックスベース： | 自動; / *デフォルトの自動* /）

0に設定すると、コンテンツの周囲の余分なスペースはカウントされません。 autoに設定すると、値に基づいて追加のスペースが割り当てられます。

フレックス

これは、、の省略形です。 2番目と3番目のパラメーター（flex-shrinkとflex-basis）はオプションです。 デフォルトは01autoです。

アイテム（フレックス：なし| [<"flex-grow"> <"flex-shrink">? || <"flex-basis"> ] }

整列-自己

このプロパティを使用すると、個々のフレックスアイテムのデフォルト（またはプロパティセット）の配置を上書きできます。

利用可能な値を理解するには、プロパティの説明をご覧ください。

Item（align-self：auto | flex-start | flex-end | center | baseline | Stretch;）。item（align-self：auto | flex-start | flex-end | center | baseline | Stretch;）

float、clear、vertical-alignはフレックスアイテムに影響を与えないことに注意してください。

の例

ほぼ毎日発生する問題を解決する最も簡単な例、つまり完全なセンタリングから始めましょう。 Flexboxを使用している場合、これは簡単なことではありません。

親（表示：フレックス;高さ：300px;）。子（幅：100px;高さ：100px;マージン：自動;）

それは余分なスペースを吸収するフレックスコンテナの自動マージンに依存します。 したがって、要素の垂直マージンを自動に設定すると、要素は両方の軸の完全に中央に配置されます。

次に、さらにいくつかのプロパティを使用しましょう。 6つの要素のリストを検討してください。これらはすべて美的に固定されていますが、自動化することもできます。 横軸に沿って等間隔に配置し、ブラウザのサイズが変更されたときに問題がないようにする必要があります（メディアクエリは不要です）。

Flex-container（display：flex; flex-flow：row wrap; justify-content：space-around;）

準備！ それ以外はすべて、設計上の問題のほんの一部です。 以下はCodePenの例です。必ずそこに行き、ウィンドウのサイズを変更して、何が起こるかを確認してください。

他のことを試してみましょう。 画面の最上部に右揃えのナビゲーションがあると想像してください。ただし、中規模の画面では中央に配置し、小さな画面では1つの列を中央に配置する必要があります。 パイと同じくらい簡単です。

ナビゲーション（display：flex; flex-flow：row wrap; justify-content：flex-end;）@ media all and（max-width：800px）（.navigation（justify-content：space-around;））@media allおよび（max-width：500px）（。navigation（flex-direction：column;））

フレックスアイテムの柔軟性を試して、もっと良いことをしてみましょう！ 要素の元の順序に依存せずに、全幅のヘッダーとフッターを備えた3列のモバイルファーストレイアウトはどうでしょうか。

ラッパー（表示：フレックス;フレックスフロー：行ラップ;）。header、.main、.nav、.aside、.footer（flex：1 100％;）@ media all and（min-width：600px）（。aside （flex：1 auto;））@ media all and（min-width：800px）（。main（flex：2 0px;）。aside-1（order：1;）。main（order：2;）。aside- 2（注文：3;）。footer（注文：4;））

関連するプロパティ

エラー

Flexboxには間違いがないわけではありません。 私が見た中で最高のコレクションは、PhilipWaltonとGregWhitworthのFlexbugsからのものです。これは、すべてのバグを追跡するためのオープンソースの場所なので、リンクを投稿するのが最善だと思います。

CSSフレックスボックス （フレキシブルボックスレイアウトモジュール）-柔軟なコンテナのレイアウトモジュール-は、軸のアイデアに基づいて要素を配置する方法です。

Flexboxはで構成されています フレックスコンテナと フレックスアイテム..。 フレックスアイテムは行または列に配置でき、残りの空き領域はさまざまな方法でそれらの間に分配されます。

フレックスボックスモジュールを使用すると、次のタスクを実行できます。

• アイテムを、左から右、右から左、上から下、または下から上の4つの方向のいずれかに配置します。
• アイテムの表示順序を上書きします。
• 使用可能なスペースに収まるように要素のサイズを自動的に変更します。
• 水平および垂直のセンタリングに関する問題を解決します。
• アイテムをオーバーフローさせずにコンテナ内に包みます。
• 同じ高さの列を作成します。
• ページの下部に固定して作成します。

Flexboxは、ナビゲーションバーなどの1次元レイアウトを作成する特定のニーズに対応します。これは、Flexアイテムは1つの軸に沿ってのみレイアウトできるためです。

現在のモジュールの問題とクロスブラウザーソリューションのリストについては、PhilipWaltonの記事を参照してください。

フレックスボックスとは

ブラウザのサポート

NS： 11.0、10.0 -ms-
Firefox： 28.0、18.0 -moz-
クロム： 29.0、21.0 -webkit-
サファリ： 6.1 -webkit-
オペラ： 12.1-webkit-
iOS Safari： 7.0 -webkit-
Opera Miniは： 8
Androidブラウザ： 4.4、4.1 -webkit-
Chrome for Android： 44

1.基本的な考え方

米。 1.フレックスボックスモデル

Flexboxモジュールを説明するために特定の用語セットが使用されます。 フレックスフロー値と書き込みモードは、これらの用語が物理的な方向にどのように対応するかを定義します：上/右/下/左、軸：垂直/水平、および寸法：幅/高さ。

主軸-フレックスアイテムが配置される軸。 それは主な次元に伸びています。

メインスタートとメインエンド-フレックスアイテムが配置される相対的なフレックスコンテナの開始側と終了側を定義する線（メインスタートからメインエンドに向かって）。

メインサイズ）-フレックスコンテナまたはフレックスアイテムの幅または高さのいずれかが基本寸法にある場合、フレックスコンテナまたはフレックスアイテムの基本サイズが決まります。

交差軸-主軸に垂直な軸。 それは横方向に伸びます。

クロススタートとクロスエンド-フレックスアイテムが配置される交差軸の開始側と終了側を定義する線。

クロスサイズ-フレックスコンテナまたはフレックスアイテムの幅または高さのいずれかが横方向の寸法である方が、それらの横方向の寸法です。

米。 2.行と列のモード

2.フレックスコンテナ

フレックスコンテナは、そのコンテンツの新しい柔軟なフォーマットコンテキストを設定します。 フレックスコンテナはブロックコンテナではないため、float、clear、vertical-alignなどのCSSプロパティは子要素に対しては機能しません。 また、フレックスコンテナは、テキストに列を作成するcolumn- *プロパティ、および:: first-lineおよび:: first-letter疑似要素の影響を受けません。

フレックスボックスレイアウトモデルは、子ボックスを含む親html要素の表示CSSプロパティの特定の値に関連付けられています。 このモデルを使用して要素を制御するには、次のようにdisplayプロパティを設定する必要があります。

Flex-container（/ *ブロックレベルのフレックスコンテナを生成します* / display：-webkit-flex; display：flex;）。Flex-container（/ *行レベルのフレックスコンテナを生成します* / display：-webkit-inline-フレックス;表示：インライン-フレックス;）

これらのプロパティ値を設定すると、各子は自動的にフレックスアイテムになり、（主軸に沿って）1行に並んでいます。 ただし、ブロック子とインライン子は同じように動作します。 ブロックの幅は、要素のパディングと境界線を考慮して、コンテンツの幅と同じです。

米。 3.フレックスボックスモデルのアイテムの配置

親ブロックにラッパーのないテキストまたは画像が含まれている場合、それらは匿名のフレックスアイテムになります。 テキストはコンテナブロックの上端に揃えられ、画像の高さはブロックの高さと同じになります。 変形します。

3.フレックスアイテム

フレックスアイテムは、フロー内のフレックスコンテナのコンテンツを表すブロックです。 フレックスコンテナは、次の機能を提供するコンテンツの新しいフォーマットコンテキストを設定します。

• フレックスアイテムの場合、それらの表示プロパティ値はロックされています。 表示値：インラインブロック; および表示：テーブルセル; ディスプレイで評価：ブロック; ..。
• アイテム間の空白が消えます。アイテム間のテキストが匿名のフレックスアイテムでラップされていても、アイテム自体のフレックスアイテムにはなりません。 匿名のフレックスアイテムのコンテンツを独自にスタイル設定することはできませんが、フレックスコンテナからそれら（フォント設定など）を継承します。
• 絶対配置されたフレックスアイテムは、フレックスレイアウトのレイアウトには関与しません。
• 隣接するフレックスアイテムのマージンフィールドは折りたたまれません。
• マージンとパディングのパーセンテージは、含まれているブロックの内側のサイズから計算されます。
• マージン：自動; 拡張し、対応する次元の追加スペースを吸収します。 これらは、隣接するフレックスアイテムを整列または拡張するために使用できます。
• フレックスアイテムのデフォルトの自動最小サイズは、そのコンテンツの最小サイズです。つまり、min-width：auto; ..。 スクロールコンテナの場合、自動最小サイズは通常ゼロです。

4.フレックスアイテムの順序と向きを表示します

フレックスコンテナのコンテンツは、任意の方向と順序でレイアウトできます（コンテナ内のフレックスアイテムの並べ替えは、視覚的なレンダリングにのみ影響します）。

4.1。 主軸方向：フレックス方向

このプロパティは、フレックスコンテナに固有です。 現在の書き込みモードに従って、フレックスアイテムがスタックされる主軸の方向を制御します。 継承されません。

フレックス方向
値：
行	デフォルトは左から右（rtlでは右から左）です。 フレックスアイテムは一列に並んでいます。 主軸の主開始方向と主端方向は、インライン軸のインライン開始とインライン終了に対応します。
行反転	右から左への方向（左から右へのrtl）。 フレックスアイテムは、コンテナの右端（rtl-左）を基準にして一列に配置されます。
桁	上から下への方向。 フレックスアイテムは列に配置されます。
列反転	下から上へ、逆の順序で要素を含む列。
イニシャル
継承

米。 4.左から右への言語のflex-directionプロパティ

構文

Flex-container（display：-webkit-flex; -webkit-flex-direction：row-reverse; display：flex; flex-direction：row-reverse;）

4.2。 フレックスコンテナのマルチラインの制御：フレックスラップ

このプロパティは、フレックスコンテナを単線にするか複数線にするかを決定し、また、フレックスコンテナの新しい線を積み重ねる方向を決定する交差軸方向を設定します。

デフォルトでは、フレックスアイテムは主軸に沿って1本の線に積み重ねられます。 それらがオーバーフローすると、フレックスコンテナのバウンディングボックスの外に出ます。 プロパティは継承されません。

米。 5.LTR言語のFlex-Wrapプロパティを使用した複数行の制御

構文

Flex-container（display：-webkit-flex; -webkit-flex-wrap：wrap; display：flex; flex-wrap：wrap;）

4.3。 方向とマルチラインの省略形：フレックスフロー

このプロパティを使用すると、主軸と交差軸の方向を定義したり、必要に応じてフレックスアイテムを複数の線に折り返すことができます。 これは、flex-directionプロパティとflex-wrapプロパティの省略形です。 デフォルトのフレックスフロー：行nowrap; ..。 プロパティは継承されません。

構文

Flex-container（display：-webkit-flex; -webkit-flex-flow：row wrap; display：flex; flex-flow：row wrap;）

4.4。 フレックスアイテムの表示順序：順序

プロパティは、フレックスアイテムが表示され、フレックスコンテナ内に配置される順序を決定します。 フレックスアイテムに適用されます。 プロパティは継承されません。

最初、すべてのフレックスアイテムの順序は0です。 ..。 要素に-1の間の値を指定すると、タイムラインの先頭に移動し、値1を末尾に移動します。 複数のフレックスアイテムの注文値が同じ場合は、元の注文に従って表示されます。

構文

Flex-container（display：-webkit-flex; display：flex;）。flex-item（-webkit-order：1; order：1;）
米。 6.フレックスアイテムの順序を表示します

5.フレックスアイテムの柔軟性

柔軟なレイアウトの明確な側面は、幅/高さ（主軸上のサイズに応じて）を変更してフレックスアイテムを「折りたたむ」機能で、基本寸法の使用可能なスペースを埋めます。 これは、flexプロパティを使用して行われます。 フレックスコンテナは、子の間に空き領域を割り当てて（フレックス成長率に比例して）コンテナを埋めるか、子を縮小して（フレックス収縮率に比例して）オーバーフローを防ぎます。

フレックスアイテムは、そのフレックスグローとフレックスシュリンクの値がゼロの場合は完全に柔軟性がなく、それ以外の場合はフレックスします。

5.1。 1つのプロパティによる柔軟なサイジング：flex

このプロパティは、flex-grow、flex-shrink、およびflex-basisプロパティの省略形です。 デフォルト値：flex：0 1 auto; ..。 1つまたは3つすべてのプロパティ値を指定できます。 プロパティは継承されません。

構文

Flex-container（display：-webkit-flex; display：flex;）。flex-item（-webkit-flex：3 1 100px; -ms-flex：3 1 100px; flex：3 1 100px;）

5.2。 成長率：フレックスグロー

このプロパティは、正の空白を割り当てるときに、フレックスコンテナ内の他のフレックスアイテムと比較して1つのフレックスアイテムがどれだけ大きくなるかを制御します。 行のフレックスアイテムのフレックスグロー値の合計が1未満の場合、それらは空き領域の100％未満を占めます。 プロパティは継承されません。

米。 7.flex-growを使用したナビゲーションバーの空き領域の管理

構文

Flex-container（display：-webkit-flex; display：flex;）。Flex-item（-webkit-flex-grow：3; flex-grow：3;）

5.3。 収縮率：フレックスシュリンク

このプロパティは、負の空白を割り当てるときに、他のフレックスアイテムと比較してフレックスアイテムがどれだけ縮小するかを指定します。 フレックスベースのベースサイズを掛けたもの。 負のスペースは、アイテムが縮小できる量に比例して割り当てられるため、たとえば、小さなフレックスアイテムは、大きなフレックスアイテムが目に見えて縮小されるまでゼロに縮小されません。 プロパティは継承されません。

米。 8.フレックスアイテムを連続して絞り込む

構文

Flex-container（display：-webkit-flex; display：flex;）。Flex-item（-webkit-flex-shrink：3; flex-shrink：3;）

5.4。 ベースサイズ：フレックスベース

このプロパティは、フレックス比に従って空き領域が割り当てられる前のフレックスアイテムの初期基本サイズを設定します。 自動とコンテンツを除くすべての値について、基本フレックスサイズは水平書き込みモードの幅と同じ方法で定義されます。 パーセンテージはフレックスコンテナのサイズに関連しており、サイズが指定されていない場合、フレックスベースに使用される値はそのコンテンツのサイズです。 継承されません。

構文

Flex-container（display：-webkit-flex; display：flex;）。Flex-item（-webkit-flex-basis：100px; flex-basis：100px;）

6.配置

6.1。 主軸の配置：ジャスティファイ-コンテンツ

このプロパティは、フレックスアイテムが占有していない空き領域を分散することにより、フレックスアイテムをフレックスコンテナの主軸に位置合わせします。 アイテムがフレックスコンテナに変換されると、フレックスアイテムはデフォルトでグループ化されます（マージンが設定されていない場合）。 マージンとフレックスグローの値を計算した後、間隔が追加されます。 アイテムにゼロ以外のフレックスグローまたはマージンがある場合：auto; 、プロパティは効果がありません。 プロパティは継承されません。

値：
フレックススタート	デフォルト値。 フレックスアイテムは、フレックスコンテナのスタートラインから離れる方向に配置されます。
フレックスエンド	フレックスアイテムは、フレックスコンテナのエンドラインから離れる方向に配置されます。
中心	フレックスアイテムは、フレックスコンテナの中央に配置されます。
スペースビトウィーン	フレックスアイテムは、ラインに沿って均等に分散されます。 最初のフレックスアイテムはスタートラインの端と同じ高さに配置され、最後のフレックスアイテムはエンドラインの端と同じ高さに配置され、ライン上の残りのフレックスアイテムは、隣接する2つのアイテム間のスペースが空くように配置されます。同じです。 残りの空白が負の場合、または1行にフレックスアイテムが1つしかない場合、この値はフレックススタートパラメーターと同じです。
スペースアラウンド	ライン上のフレックスアイテムは、隣接する2つのフレックスアイテム間の距離が同じになるように間隔が空けられ、最初/最後のフレックスアイテムとフレックスコンテナのエッジの間の距離は、フレックスアイテム間の距離の半分になります。
イニシャル	プロパティ値をデフォルト値に設定します。
継承	親要素からプロパティ値を継承します。

米。 9.Justify-Contentプロパティを使用したアイテムの配置と空き領域の割り当て

構文

Flex-container（display：-webkit-flex; -webkit-justify-content：flex-start; display：flex; justify-content：flex-start;）

6.2。 軸間位置合わせ：align-itemsおよびalign-self

フレックスアイテムは、フレックスコンテナの現在の行の交差軸に揃えることができます。 align-itemsは、匿名のフレックスアイテムを含むすべてのフレックスコンテナアイテムの配置を設定します。 align-selfを使用すると、個々のフレックスアイテムに対してこの配置を上書きできます。 フレックスアイテムの横方向のマージンのいずれかが自動である場合、align-selfは効果がありません。

6.2.1。 アイテムを揃える

匿名のフレックスアイテムを含むフレックスアイテムを交差軸に沿って配置します。 継承されません。

値：
フレックススタート
フレックスエンド
中心
ベースライン	位置合わせに関係するすべてのフレックスアイテムのベースラインは同じです。
ストレッチ
イニシャル	プロパティ値をデフォルト値に設定します。
継承	親要素からプロパティ値を継承します。

米。 10.コンテナ内のアイテムを垂直に配置します

構文

Flex-container（display：-webkit-flex; -webkit-align-items：flex-start; display：flex; align-items：flex-start;）

6.2.2。 自分を揃える

プロパティは、単一のフレックスアイテムをフレックスコンテナの高さに揃える役割を果たします。 align-itemsで指定された配置を上書きします。 継承されません。

値：
自動	デフォルト値。 フレックスアイテムは、フレックスコンテナのalign-itemsプロパティで指定された配置を使用します。
フレックススタート	フレックスアイテムの上端は、交差軸の原点を通るフレックスライン（または要素の指定されたマージンと境界線が与えられた場合は間隔）と同じ高さに配置されます。
フレックスエンド	フレックスアイテムの下端は、交差軸の端を通るフレックスライン（または要素の指定されたマージンと境界線が与えられた場合は間隔）と同じ高さに配置されます。
中心	フレックスアイテムのマージンは、フレックスライン内の交差軸の中心にあります。
ベースライン	フレックスアイテムはベースラインに揃えられます。
ストレッチ	フレックスアイテムのクロスサイジングが自動で、クロスマージンが自動でない場合、アイテムは引き伸ばされます。 デフォルト値。
イニシャル	プロパティ値をデフォルト値に設定します。
継承	親要素からプロパティ値を継承します。

米。 11.個々のフレックスアイテムを揃えます

構文

Flex-container（display：-webkit-flex; display：flex;）。Flex-item（-webkit-align-self：center; align-self：center;）

6.3。 フレックスコンテナの行の整列：align-content

このプロパティは、justify-contentプロパティを使用して主軸に個々のアイテムを配置するのと同様に、交差軸に余分なスペースがある場合にフレックスコンテナの行を配置します。 このプロパティは、ワンライナーフレックスコンテナには影響しません。 継承されません。

値：
フレックススタート	フレックスコンテナの先頭に向かって線が積み重ねられます。 最初の行の端はフレックスコンテナの端の近くに配置され、後続の各行は前の行の近くに配置されます。
フレックスエンド	ラインはフレックスコンテナの端に向かって積み重ねられます。 最後の行の端はフレックスコンテナの端の近くに配置され、前の各行は次の行の近くに配置されます。
中心	ラインはフレックスコンテナの中心に向かって積み重ねられます。 行は互いに近接しており、フレックスコンテナコンテンツの開始エッジと最初の行の間、およびフレックスコンテナコンテンツの終了エッジと最後の行の間で等間隔でフレックスコンテナの中心に位置合わせされます。
スペースビトウィーン	フレックスコンテナでは、行が等間隔に配置されます。 残りの空き領域が負の場合、またはフレックスコンテナにフレックスラインが1つしかない場合、この値はフレックススタートと同じです。 それ以外の場合、最初の行のエッジはフレックスコンテナコンテンツの開始エッジの近くに配置され、最後の行のエッジはフレックスコンテナコンテンツのトレーリングエッジの近くに配置されます。 残りの線は、隣接する2本の線の間の距離が同じになるように配置されます。
スペースアラウンド	線は、両端に半分のスペースがあるフレックスコンテナ内で等間隔に配置されます。 残りの空き領域が負の場合、この値はセントセンターと同じです。 それ以外の場合、線は、隣接する2つの線の間の間隔が同じになるように間隔が空けられ、最初/最後の線とフレックスコンテナコンテンツのエッジの間の間隔は、線の間の間隔の半分になります。
ストレッチ	デフォルト値。 フレックスアイテムの列は、使用可能なすべてのスペースを埋めるために均等に伸びます。 残りの空き領域が負の場合、この値はフレックススタートと同じです。 それ以外の場合、空き領域はすべての行に均等に分割され、横方向のサイズが大きくなります。
イニシャル	プロパティ値をデフォルト値に設定します。
継承	親要素からプロパティ値を継承します。

米。 12.フレックスアイテムの複数行の配置

構文

Flex-container（display：-webkit-flex; -webkit-flex-flow：row wrap; -webkit-align-content：flex-end; display：flex; flex-flow：row wrap; align-content：flex-end ;高さ：100px;）

flexboxがWeb開発者の興味をすぐに惹きつけた理由の1つは、flexboxが初めて適切な位置合わせ機能をWebにもたらしたことです。 これにより、適切な垂直方向の位置合わせが可能になったため、ようやくボックスを簡単に中央に配置できます。 このガイドでは、Flexboxで位置合わせと位置合わせのプロパティがどのように機能するかを詳しく見ていきます。

ボックスを中央に配置するには、align-itemsプロパティを使用して、アイテムを交差軸（この場合は垂直に走るブロック軸）に位置合わせします。 justify-contentを使用して、アイテムを主軸（この場合はインライン軸が水平に走っている）に揃えます。

以下のこの例のコードを見てください。 コンテナまたはネストされた要素のサイズを変更すると、ネストされた要素は常に中央に配置されたままになります。

配置を制御するプロパティ

このガイドで説明するプロパティは次のとおりです。

• justify-content-主軸上のすべてのアイテムの配置を制御します。
• align-items-クロス軸上のすべてのアイテムの配置を制御します。
• align-self-クロス軸上の個々のフレックスアイテムの配置を制御します。
• align-content-「フレックスラインのパッキング」に関して仕様に記載されています。 交差軸上のフレックスライン間のスペースを制御します。

また、フレックスボックスでの位置合わせに自動マージンを使用する方法についても説明します。

ノート：Flexboxの配置プロパティは、独自の仕様（CSSボックス配置レベル3）に配置されています。 この仕様は、最終的にFlexboxレベル1で定義されているプロパティに取って代わることが期待されています。

交差軸

align-itemsプロパティとalign-selfプロパティは、フレックス方向が行の場合は列を下に、フレックス方向が列の場合は行に沿って、クロス軸上のフレックスアイテムの配置を制御します。

最も単純なフレックスの例では、クロスアクシスアライメントを利用しています。 display：flexをコンテナに追加すると、子アイテムはすべて一列に配置されたフレックスアイテムになります。 そのアイテムが交差軸上のアイテムの高さを定義しているので、それらはすべて最も高いアイテムと同じ高さに伸びます。 フレックスコンテナに高さが設定されている場合、アイテムのコンテンツの量に関係なく、アイテムはその高さまで伸びます。

アイテムが同じ高さになる理由は、クロス軸の位置合わせを制御するプロパティであるalign-itemsの初期値がstretchに設定されているためです。

他の値を使用して、アイテムの配置方法を制御できます：

• align-items：flex-start
• アイテムの整列：フレックスエンド
• 整列アイテム：中央
• 整列アイテム：ストレッチ
• アイテムの整列：ベースライン

以下の実際の例では、align-itemsの値はstretchです。 他の値を試して、フレックスコンテナ内のすべてのアイテムが互いにどのように整列するかを確認してください。

1つのアイテムをalign-selfに揃える

align-itemsプロパティは、すべてのフレックスアイテムにグループとしてalign-selfプロパティを設定します。 これは、align-selfプロパティを明示的に宣言して、単一のアイテムをターゲットにできることを意味します。 align-selfプロパティは、align-itemsと同じ値のすべてに加えてautoの値を受け入れます。これにより、値がフレックスコンテナで定義されている値にリセットされます。

この次のライブの例では、flexコンテナにalign-items：flex-startがあります。これは、アイテムがすべて交差軸の始点に位置合わせされていることを意味します。 最初の子セレクターを使用して最初のアイテムをターゲットにし、そのアイテムをalign-self：stretch;に設定しました。 選択され、与えられたalign-self：centerのクラスを使用して、別のアイテムが選択されました。 個々のアイテムのalign-itemsの値を変更したり、align-selfの値を変更したりして、これがどのように機能するかを確認できます。

主軸の変更

これまで、フレックス方向が行であるとき、および上から下に書かれた言語で作業しているときの動作を見てきました。 これは、主軸が行に沿って水平に走り、交差軸の配置によってアイテムが上下に移動することを意味します。

flex-directionをcolumnに変更すると、align-itemsとalign-selfはアイテムを左右に揃えます。

以下の例でこれを試すことができます。この例には、flex-direction：columnを持つflexコンテナーがありますが、それ以外は前の例とまったく同じです。

クロス軸にコンテンツを配置する-align-contentプロパティ

これまで、アイテム、またはフレックスコンテナによって定義された領域内の個々のアイテムを整列させてきました。 ラップされた複数行のフレックスコンテナがある場合は、align-contentプロパティを使用して、行間のスペースの分散を制御することもできます。 仕様では、これはパッキングフレックスラインとして説明されています。

整列コンテンツを機能させるには、アイテムを表示するために必要な高さよりもフレックスコンテナの高さが必要です。 次に、すべてのアイテムをセットとして処理し、その空き領域で何が発生するか、およびその中のアイテムのセット全体の配置を指示します。

align-contentプロパティは、次の値を取ります。

• align-content：flex-start
• align-content：フレックスエンド
• 整列-コンテンツ：中央
• align-content：space-between
• align-content：space-around
• 整列-コンテンツ：ストレッチ
• align-content：space-evenly（Flexbox仕様では定義されていません）

以下のライブの例では、フレックスコンテナの高さは400ピクセルであり、アイテムを表示するのに必要な高さを超えています。 align-contentの値はspace-betweenです。これは、使用可能なスペースが共有されることを意味します。 の間にフレックスラインは、クロス軸上でコンテナの開始と終了と同じ高さに配置されます。

他の値を試して、align-contentプロパティがどのように機能するかを確認してください。

もう一度、flex-directionをcolumnに切り替えて、列ごとに作業しているときにこのプロパティがどのように動作するかを確認できます。 前と同じように、すべてのアイテムを表示した後、ある程度の空きスペースを確保するために、クロス軸に十分なスペースが必要です。

ノート：値space-evenlyはflexbox仕様で定義されておらず、後でBoxAlignment仕様に追加されます。 この値のブラウザサポートは、フレックスボックス仕様で定義されている値のサポートほど良くありません。