フレックスレイアウト - レビュー

flex は柔軟なレイアウトです。
任意のコンテナをフレックスレイアウトとして指定できます。
.box{display: flex}
インライン要素は flex レイアウトを使用できます
.box{display: inline-flex}
webkit カーネルを搭載したブラウザでは、-webkit プレフィックスを追加する必要があります。
.box{display:-webkit-flex; display:flex;}
注: 要素をフレックス レイアウトに設定すると、子要素の float、clear、vertical-align 属性は無効になります。
基本概念:
フレックスレイアウトを採用する要素はフレックスコンテナと呼ばれ、そのすべての子要素は自動的にフレックス
アイテムと呼ばれるコンテナメンバーになります。
コンテナにはデフォルトで水平主軸と垂直交差軸の 2 つの軸があります。主軸の開始位置 (境界線との交点) をメイン スタート、終了位置をメイン エンドと呼びます。 交差軸の開始位置をクロス スタート、終了位置をクロス スタートと呼びます。技術的な位置はクロスエンドと呼ばれ、単一のプロジェクトが占める主軸のスペースはメインサイズと呼ばれ、それが占めるクロス軸のスペースはクロスサイズと呼ばれます。

コンテナのプロパティ:
コンテナには 6 つのプロパティが設定されています。
flex-direction flex-wrap flex-flow justify-content
align-items align-content
1.flex-direction
このプロパティは主軸の方向（つまりアイテムの配置方向）を決定します
.box{row- direct:row | -reverse | column-reverse;}
row (デフォルト値) 主軸は水平で、開始点は左端です。
row-reverse: 主軸は水平で、開始点は右端にあります。
column: 主軸は垂直であり、始点は上端にあります。
column-reverse: 主軸は垂直であり、開始点は下端にあります。
2.flex-wrap属性
デフォルトでは、項目は線（軸とも呼ばれます）上に配置されます。 flex-wrap属性は、軸を配置できない場合に線を折り返す方法を定義します。
.box{flex-wrap: nowrap | Wrap | Wrap-reverse;}
nowrap (デフォルト): 行折り返しなし。
wrap: 1行目を先頭にしてラップします。
wrap-reverse: 下の最初の行を折り返します。
3.flex-flow
flex-flow属性は、flex-direction属性とflex-wrap属性の略称です
.box{ flex-flow: | ;}
4.justify-content 属性
この属性は主軸上の項目の配置を定義します。
.box{justify-content: flex-start | flex-end | space-between | space-around;}
5つの値は、メインの軸の方向に関係するものとします。軸は左から右です。 T Flex-Start (デフォルト値): Left
Flex-End Right




Space-Between: 両端の位置合わせ、プロジェクト間の間隔は等しくなります。
space-around: 各項目の両側の間隔が等しいため、項目間の距離は項目と境界線の間の距離の 2 倍になります。
5.align-items
この属性は、項目が交差軸上でどのように配置されるかを定義します。
.box{align-items: flex-start | flex-end | baseline |stretch;}
具体的な位置合わせは交差軸の方向を想定しています。は上から下までです。
flex-start: 十字軸の始点を揃えます。
flex-end：十字軸の終点を揃えます。
center: クロス週の中点を揃えます。
ベースライン: アイテムのテキストの最初の行のベースライン配置。
stretch (デフォルト値) 項目に高さが設定されていない場合、または auto が設定されている場合、項目はコンテナーの高さ全体を占めます。
6.align-content 属性
この属性は、複数の軸の配置を定義します。プロジェクトに 1 つの軸しか持てない場合、この属性は効果がありません。
.box{align-content: flex-start | flex-end | space-between | space-around |
stretch;}
プロパティは6つの値を取ることができます。
flex-start: 交差軸の始点に合わせます。
flex-end: 交差軸の終点に合わせます。
center: 十字軸の中点に合わせます。
space-between; 十字軸の両端に合わせて、軸間の間隔を均等にします。
space-around: 各軸の両側の間隔が等しい。

プロジェクト属性
プロジェクトには6つの属性を設定できます。

1.order属性
「」 2. flex-grow属性
プロパティ プロジェクトの拡大率を定義します。デフォルトは0です。 、残りのスペースがある場合は、それも拡大されます。
.item { flex-grow: ;}
すべてのアイテムの flex-grow 属性が 1 の場合、それらは残りのスペースを囲みます。アイテムの flex-grow 属性が 2 の場合、他のすべてのアイテムは残りのスペースを囲みます。残りのスペース 1 を囲むと、前者は他のアイテムの 2 倍の残りスペースを占有します。

flex-shrink 属性は、アイテムの収縮率を定義します。デフォルトは 1 で、スペースが不足しているため、アイテムが縮小されます。
.item{flex-shrink:;}

ある項目の flex-shrink 属性が o で、他の項目がすべて 1 の場合、スペースが不足している場合、前者の
は縮小されません。このプロパティには負の値は無効です。
4. フレックスベーシス属性
銀行 ]' through in in inUpon in in in in in on in flex-basis プロパティ4.flex-basis プロパティ
ccosten の іѕ 属性は、アイテムが配置する主軸空間を定義します余分なスペースが割り当てられる前に領域が占有されている場合、ブラウザはこの属性を使用して、主軸に余分なスペースがあるかどうかを計算します
。デフォルト値は auto で、これはプロジェクトの元のサイズです。
.item {flex-basis: | auto;}
width 属性や height 属性と同様の値に設定すると、項目は固定スペースを占有します。
5.flex属性
flex属性は、flex-shrinkとflexとflex-basisの略称で、デフォルト値
後者の2つの属性はオプションです。
.item { flex:none | [<'flex-grow'<'flex-shrink'>]}
? この属性には次の 2 つのショートカット値があります。 (1 1 自動) となし (0 0 自動)。ブラウザが関連する値を計算するため、
6 .align-self 属性
】 3 つの個別の属性を記述することで、スルースルースルー
6. align-self 属性を使用すると、align 属性をオーバーライドできます。デフォルト値は auto です。親要素がない場合は、stretch.item{align-start | flex-end |stretch;} を継承することを意味します。
この属性は auto を除いて 6 つの値を取ることができ、その他は align-items 属性とまったく同じです。

その他のフレックス レイアウト - 関連記事を確認するには、PHP 中国語 Web サイトに注目してください。