フレックスレイアウトの詳しい説明

今回は flex レイアウトの詳細な説明をお届けします。 flex レイアウトの詳細な説明の 注意点 について、実際の事例を見てみましょう。

垂直方向の中央揃えは、一般的な ページ レイアウト の方法です。インライン要素の場合は、 text-align:center;vertical-align:center を設定して、それを実現できます。
ブロックレベルの要素の場合は、通常、次の方法で実現できます。以下の設定

.parent{    position: relative;
}.child{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);
}

ただし、CSS のシンプルさとエレガントさのために、インライン、インラインブロック、ブロック レイアウトに加えて、4 番目の CSS レイアウト方法 flex が登場しました。 以下の設定だけで要素を簡単に垂直方向に中央揃えにすることができます。設定

.parent{    display: flex;    justify-content: center;    align-items: center;
}

注: フレックスレイアウトに設定すると、子要素の float、clear、vertical-align 属性は無効になります

flex

基本概念

フレックスレイアウトを使用する要素はフレックスコンテナと呼ばれます。要素内のすべての子要素はフレックス項目と呼ばれます。

コンテナにはデフォルトで 2 つの軸があります: 水平主軸と垂直交差軸です。
主軸の開始位置(境界線との交点)をメインスタート、終了位置をメインエンド、クロス軸の開始位置をクロススタート、終了位置をクロスエンドと呼びます。
デフォルトでは、アイテムは主軸に沿って配置されます。単一のアイテムが占める主軸のスペースはメイン サイズと呼ばれ、単一のアイテムが占める横軸のスペースはクロス サイズと呼ばれます。

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

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction

flex-directionプロパティは主軸の方向を決定します。

row (デフォルト値): 主軸は水平方向、始点は左端です。

row-reverse: 主軸は水平方向、始点は右端です。

column: 主軸は垂直方向であり、始点は上端にあります。

column-reverse: 主軸は垂直方向であり、始点は下端にあります。

flex-wrap

デフォルトでは、項目は主軸に配置されます。 flex-wrap 属性は、主軸の行を配置できない場合に折り返す方法を定義します。

nowrap (デフォルト値): 行の折り返しなし

wrap: 行の折り返し、最初の行が上部にあります

wrap-reverse: 行の折り返し、最初の行が下部にあります

flex-flow

flex -flow プロパティは flex-direction プロパティと flex-wrap プロパティの短縮形です。

デフォルト値は row nowrap です。

justify-content

justify-content プロパティは、主軸上の (要素からの) 項目の配置を定義します。

flex-start (デフォルト): 左揃え

flex-end: 右揃え

center: 中央

space-between: 項目間の均等な間隔で両端を揃えます。

スペースアラウンド: 各アイテムは両側に等間隔に配置されます。したがって、項目間のスペースは、項目と境界線の間のスペースの 2 倍になります。

align-items

align-items プロパティは、項目を交差軸上でどのように配置するかを定義します。

ストレッチ (デフォルト値): アイテムの高さが設定されていない場合、または自動に設定されている場合、アイテムはコンテナーの高さ全体を占めます。

flex-start: 交差軸の開始点を揃えます。

flex-end: 交差軸の終点を揃えます。

center: 十字軸の中点を揃えます。

baseline: アイテムのテキストの最初の行のベースライン配置。

align-content

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

ストレッチ (デフォルト値): 軸は交差軸全体を占めます。

flex-start: 交差軸の開始点に位置合わせされます。

flex-end: 交差軸の終点に位置合わせされます。

center: 交差軸の中点に位置合わせされます。

間隔: 交差軸の両端に合わせて、軸間の間隔が均等になります。

space-around: 各軸の両側のスペースは等しいです。したがって、軸間の距離は、軸とフレーム間の距離の 2 倍になります。

flex item (self要素)属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self
order

order属性は項目の順序を定義します。値が小さいほどランクが高くなります。デフォルトは 0 です。

flex-grow

flex-grow 属性は、項目の拡大率を定義します。デフォルトは 0 です。つまり、スペースが残っている場合は拡大されません。

すべての項目の flex-grow プロパティが 1 の場合、残りのスペースを均等に分割します。
1 つの項目の flex-grow プロパティが 2 で、他の項目がすべて 1 の場合、前者は他の項目の 2 倍の残りのスペースを占有します。

flex-shrink

flex-shrink 属性はアイテムの収縮率を定義します。デフォルトは 1 です。つまり、スペースが不十分な場合、アイテムは縮小します。

すべてのアイテムのフレックスシュリンクプロパティが1の場合、スペースが不足すると、すべてのアイテムが比例して縮小されます。
1 つの項目の flex-shrink プロパティが 0 で、他の項目が 1 の場合、スペースが不足している場合、前者は縮小されません。
このプロパティには負の値は無効です。

flex-basis

flex-basis プロパティは、余分なスペースを割り当てる前に項目の主なサイズを定義します。

この属性に基づいて、ブラウザは主軸に余分なスペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクトの元のサイズです。
幅または高さの属性と同じ値 (350px など) に設定でき、その場合、アイテムは固定スペースを占有します。

flex

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

この属性には 2 つのショートカット値があります: auto (1 1 auto) と none (0 0 auto)。

自己整列

align-self 属性を使用すると、単一のアイテムを他のアイテムとは異なる方法で配置でき、align-items 属性をオーバーライドできます。
デフォルト値: auto。親要素がない場合は、親要素の align-items 属性を継承することを意味します。
この属性は 6 つの値を取ることができ、auto を除き、他の値は align-items 属性とまったく同じです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JavaScriptのオブザーバーパターン

JavaScriptのプロキシパターン

JavaScriptの戦略パターン

以上がフレックスレイアウトの詳しい説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。