[CSS]フレックスレイアウト-弾性ボックス-伸縮ボックス-フローティングの代わりに

参照

Flex Layoutチュートリアル：構文
Flex Layoutチュートリアル：例

1.フレックスとは

フレックス（フレキシブルボックス、テレスコピックボックス）

• これはcss3の別のレイアウト方法です
• 主にフローティングの代わりにページのレイアウトを完成させます
• フレックスは要素を柔軟にすることができるので、要素はページのサイズに応じて変化する可能性があります。
  
  主軸：配置の方向。
  横軸：主軸に垂直。

2.フレキシブルコンテナ

弾性ボックスを使用するには、最初に要素を弾性コンテナとして設定する必要があり
ます。ディスプレイから弾性コンテナを設定します。

.box{
    
    
  display: flex; /* 设置为块级弹性容器*/
  dispaly: inline-flex /* 设置为行内弹性容器*/
}

• Flexレイアウトに設定した後、子要素のfloat、clear、vertical-align属性は無効になります

コンテナのプロパティ

フレックス方向

属性は、主軸の方向（つまり、アイテムが配置される方向）を決定します。

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

行（デフォルト値）：主軸は水平方向で、開始点は左端です。
行反転：主軸は水平方向で、開始点は右端です。
列：主軸は垂直方向であり、開始点は上端にあります。
column-reverse：主軸は垂直方向で、開始点は下端にあります。

フレックスラップ

デフォルトでは、アイテムは1つの線（「軸線」とも呼ばれます）に配置されます。flex-wrap属性は、軸線が収まらない場合の折り返し方法を定義します。

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

（1）nowrap（デフォルト）：ラップしません。
（2）折り返し：折り返し、最初の行が一番上にあります。
（3）wrap-reverse：wrap、最初の行は下にあります。

フレックスフロー

flex-flow属性は、flex-direction属性とflex-wrap属性の短縮形です。デフォルト値はrow nowrap
（配置方向、改行なしで変更）です。

.box {
    
    
  flex-flow: <flex-direction> || <flex-wrap>;
}

正当化-コンテンツ

justify-content属性は、主軸上のアイテムの配置を定義します。

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

flex-start（デフォルト）：左揃え
flex-end：右揃え
中央：中央揃え：
space-between両端に揃え、アイテム間のスペースは同じです。

space-around：各項目の両側の間隔は同じです。したがって、アイテム間の間隔は、アイテムと境界線の間の間隔の2倍になります。

space-evenly：均等に分散（互換性が悪い）

アイテムを揃える

align-item属性定義の交差軸のitemsを整列させる必要があります。

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

flex-start：交差軸の開始点を揃えます。
フレックスエンド：交差軸の終点を揃えます。
center：交差軸の中心点が整列します。
ベースライン：プロジェクトのテキストの最初の行のベースライン配置。
ストレッチ（デフォルト）：プロジェクトに高さが設定されていないか、自動に設定されている場合、プロジェクトはコンテナ全体の高さを占めます。

整列-コンテンツ

align-content属性は、複数の軸の配置を定義します。プロジェクトに軸が1つしかない場合、このプロパティは効果がありません。

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

flex-start：交差軸の開始点に合わせます。
フレックスエンド：クロス軸の端に揃えます。
中央：交差軸の中点に揃えます。
間隔：交差軸の両端に揃えると、軸間の間隔が均等に分散されます。
スペースアラウンド：各軸の両側のスペースは同じです。したがって、軸間の間隔は、軸とフレーム間の間隔の2倍になります。
ストレッチ（デフォルト）：軸は交差軸全体を占めます。

3.弾性要素の特性

弾性コンテナの（直接の）子要素は、弾性要素（弾性アイテム）です。
要素は、同時に弾性コンテナと弾性要素にすることができます。

注文

order属性は、アイテムの順序を定義します。値が小さいほど配置が大きくなり、デフォルトは0です。

.item {
    
    
  order: <integer>;
}

フレックスグロー

flex-grow属性は、親要素に余分なスペースがある場合に子要素を拡大する方法を定義します。デフォルトは0です。つまり、余分なスペースがある場合、拡大されません。

.item {
    
    
  flex-grow: <number>; /* default 0 */
}

親要素の残りのスペースは比例配分されます

フレックスシュリンク

flex-shrink属性は、親要素のスペースがすべての子要素を収容するのに十分でない場合に子要素がどのように伸びるかを定義します。デフォルトは1です。つまり、スペースが不十分な場合、アイテムは縮小します。

.item {
    
    
  flex-shrink: <number>; /* default 1 */
}

すべてのアイテムのflex-shrinkプロパティが1の場合、スペースが不足すると、すべてのアイテムが縮小されます。1つのアイテムのflex-shrinkプロパティが0で、他のすべてのアイテムが1の場合、スペースが不足していても前者は縮小しません。
この属性の負の値は無効です。

フレックスベース

flex-basis属性は、追加のスペースが割り当てられる前にアイテムが占めるメインサイズ（メインサイズ）を定義します。ブラウザは、この属性に基づいて、主軸に余分なスペースがあるかどうかを計算します。デフォルト値はautoで、これはプロジェクトの元のサイズです。

.item {
    
    
  flex-basis: <length> | auto; /* default auto */
}

幅または高さの属性と同じ値（350pxなど）に設定でき、アイテムは固定スペースを占有します。

フレックス

flexプロパティは、flex-grow、flex-shrink、およびflex-basisの省略形であり、デフォルト値は0 1autoです。最後の2つの属性はオプションです。

.item {
    
    
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

この属性には、auto（1 1 auto）とnone（0 0 auto）の2つのショートカット値があります。
初期：0 1自動
自動：1 1自動
なし：00自動

ブラウザが関連する値を計算するため、3つの個別の属性を個別に記述するのではなく、最初にこの属性を使用することをお勧めします。

整列-自己

align-self属性を使用すると、単一のアイテムを他のアイテムとは異なる配置にすることができ、 align-items属性をオーバーライドできます。
デフォルト値はautoです。これは、親要素のalign-items属性が継承されることを意味します。親要素がない場合は、stretchと同等です。

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