【基礎知識】Flex-フレキシブルレイアウトはこんなに簡単!!

簡単に言えば
レイアウトの従来の解決策は、ボックスモデルに基づいて、display+position+float方式に依存して実現されており、柔軟性が劣っている.2009年、W 3 Cは新しい案-Filexを提案し、FlexはFlexible Boxの略で、「フレキシブルレイアウト」を意味する.Flexは、複数のページレイアウトを簡便かつ完全かつ応答的に実現します.基礎文法から始め、Flexの魅力を感じてみましょう.
1基本概念
Flexレイアウトを採用した要素は、Flexコンテナ(flex container)と呼ばれ、略称は「コンテナ」である.すべてのサブエレメントが自動的にコンテナメンバーとなり、Flexプロジェクト(flex item)、略称「プロジェクト」と呼ばれます.
コンテナのデフォルトでは、水平の主軸(main axis)と垂直の交差軸(cross axis)の2本の軸があります.主軸の開始位置(枠との交差点)をmain start、終了位置をmain endと言います.交差軸の開始位置をcross start,終了位置をcross endと呼ぶ.
Flexプロジェクトは、主軸に沿ってデフォルトで配置されます.単一項目が占める主軸空間をmain size,占有する交差軸空間をcross sizeと呼ぶ.
Flex属性は2つの部分に分けられ、一部はコンテナに作用してコンテナ属性と呼ばれ、もう一部はプロジェクトに作用してプロジェクト属性と呼ばれている.以下、支店で紹介します.
2 Flexコンテナのプロパティ
2.1 flexコンテナ定義
基本構文:

.box {
  display: flex; /*    inline-flex */
}

上記の書き方では、flex容器を定義し、設定値によってブロック容器またはインライン容器であってもよい.これにより、直接サブノードはflexコンテキストを持つようになります.
2.2 flex-direction flex-direction属性は主軸の方向(すなわち項目の配列方向)を決定する.
基本構文:

.box {
    flex-direction: row | row-reverse | column | column-reverse;
}

row左から右へ並ぶことを示す

row-reverse右から左へ並ぶことを示す

column上下に並ぶことを示す

column-reverse下から上へ並ぶことを示す

デモ:
デモプログラム
2.3 flex-wrap
デフォルトでは、Flexプロジェクトは1本の線(軸線とも呼ばれる)に並んでいます.flex-wrapプロパティの設定で、Flexアイテムを改行させることができます.
基本構文:

.box {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

nowrap(デフォルト):すべてのFlexアイテムを1行ずつ並べ替える

wrap:すべてのFlex項目が複数行並び、上から下への順

wrap-reverse:すべてのFlex項目が複数行並び、下から上への順

デモ:
デモプログラム
上記のデモプログラムを観察し、異なる属性の意味を理解します.プレゼンテーションエリアをクリックすると、プレゼンテーションを開始または停止できます.
2.4 flex-flow flex-flow属性はflex-direction属性とflex-wrap属性の略記形式で、デフォルトはrow nowrap基本構文:

.box {
    flex-flow:  || 
}

2.5 justify-content justify-content属性は、主軸上のアイテムの位置合わせおよび余分なスペースの割り当てを定義します.
基本構文:

.box  {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

flex-start(デフォルト):点線から順番に並ぶ

flex-end:相対終点線順配列

center:中央に並ぶ

space-between:項目が均等に分布し、第一項がスタートライン、最後項がゴールライン

space-around:項目が均一に分布しており、各項目の両側に同じ白空間があり、隣接項目間の距離は両項目間の白の和

space-evenly:項目が均等に分布し、全ての項目間及び項目と枠間の距離が等しい

デモ:
デモプログラム
2.6 align-items align-items属性定義項目の交差軸での位置合わせ.
基本構文:

.box {
  align-items: stretch | flex-start | flex-end | center | baseline;
}

stretch(デフォルト):クロス軸方向延伸表示

flex-start:項目を交差軸始点線で揃える

flex-end:項目をクロス軸終点線で揃える

center:交差軸方向項目中央揃え

baseline:交差軸方向を1行目の文字ベースラインで揃える

デモ:
デモプログラム
2.7 align-content align-content属性は、主軸上justify-contentと同様に、交差軸方向の位置合わせおよび余分な空間配分を定義する.
基本構文:

.box {
    align-content: stretch | flex-start | flex-end | center | space-between | space-around ;
}

stretch(デフォルト):ストレッチ表示

flex-start:スタートラインから順番に並ぶ

flex-end:相対終点線順配列

center:中央に並ぶ

space-between:項目が均等に分布し、第一項がスタートライン、最後項がゴールライン

space-around:項目が均一に分布しており、各項目の両側に同じ白空間があり、隣接項目間の距離は両項目間の白の和

デモ:
デモプログラム
3 Flexプロジェクトのプロパティ
3.1 order
デフォルトでは、Flexアイテムはコードに表示される順に並べられています.ただしorder属性は、コンテナ内のアイテムの順序を制御します.
基本構文:

.item {
  order: ; /*    0 */
}

order値が小さい順に並べられ、負の値、デフォルトは0になります.
デモ:
デモプログラム
3.2 flex-grow flex-grow属性定義項目の拡大率、flex-grow値は1単位の正の整数であり、拡大率を示す.デフォルトは0です.つまり、余分なスペースがある場合も拡大せず、負の値は無効です.
すべてのプロジェクトのflex-growプロパティが1の場合、残りのスペースは等分されます(ある場合).1つのプロジェクトのflex-growプロパティが2で、他のプロジェクトが1の場合、前者が占める残りのスペースは他のアイテムの2倍になります.
基本構文:

.item {
  flex-grow: ; /*    0 */
}

デモ:
デモプログラム
3.3 flex-shrink flex-shrink属性は、項目の縮小率を定義し、デフォルトでは1である.すなわち、スペースが不足すると、その項目は縮小される.0は縮小せず、負の値は無効です.
基本構文:

.item {
  flex-shrink: ; /*    1 */
}

デモ:
デモプログラム
3.4 flex-basis flex-basis属性定義項目の余分なスペースを割り当てる前のデフォルトサイズ.属性値は、長さ(20%、10 remなど)またはキーワードautoであってもよい.デフォルト値はauto、すなわちプロジェクトの本来のサイズです.
基本構文:

.item {
  flex-basis:  | auto; /*    auto */
}

デモ:
デモプログラム
3.5 flex flex属性はflex-grow、flex-shrinkとflex-basisの略記で、デフォルト値は0 1 autoです.次の2つはオプションのプロパティです.
基本構文:

.item {
  flex: none | [  ? ||  ]
}

一般に、各プロパティを個別に定義するのではなく、このような簡略化された方法を推奨します.
3.6 align-self align-self属性は項目の位置合わせを定義し、align-items属性を上書きすることができる.デフォルト値はautoで、親要素のalign-items属性を継承し、親要素がない場合stretchと同等です.
基本構文:

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

オート値以外はalign-selfコンテナのalign-items属性とほぼ一致.
デモ:
デモプログラム
4互換性
Chrome
Safari
Firefox
Opera
IE
Android
iOS
21+
6.1+
22+
12.1+
11+
4.4+
7.1+
Flexboxでは、ほとんどのブラウザをサポートするために特定の接頭辞が必要です.まったく異なる属性名や属性値も存在します.Autoprefixerまたは同様のCSSポストプロセッサのサポートが必要です.詳細は、関連ドキュメントを参照してください.
5関連リソース
A Complete Guide to Flexbox
Flexbox in the CSS specifications
Flexbox at MDN
Flexレイアウト構文チュートリアル