フレックスレイアウトの基本構文の詳細な紹介

この記事では、フレックス レイアウトの基本的な構文を詳しく紹介します。これには一定の参考価値があります。必要な友人は参照できます。お役に立てば幸いです。

2009 年、W3C は、さまざまなページ レイアウトを簡単、完全、応答性良く実現できる新しいソリューションである Flex レイアウトを提案しました。現時点では、すべてのブラウザでサポートされているため、この機能を安全に使用できることを意味します

#1. フレックス レイアウトとは何ですか? #Flex は、 Flexible Box の略語で、「柔軟なレイアウト」を意味し、ボックス型のモデルに最大限の柔軟性を提供するために使用されます。

flex レイアウト: .box{display:flex;}

インライン要素は、フレックス レイアウトも使用します: .box{display:inline-flex;}

Webkit コアを備えたブラウザでは、-webkit プレフィックスを追加する必要があります: .box{display:-webkit-flex; display:flex ;}

Flex レイアウトに設定した後は、子要素の float、clear、vertical-align 属性が無効になることに注意してください。

2. 基本概念

フレックス コンテナ (フレックス コンテナ): フレックス レイアウトを採用する要素をフレックス コンテナと呼びます。

フレックス プロジェクト (フレックス アイテム) ): フレックス コンテナのすべての子要素は、自動的にコンテナ メンバー、つまりフレックス アイテムになります。

コンテナの 2 つの軸: 水平主軸 (主軸)、垂直交差軸 (クロス軸) .

主軸: 開始位置 -> メイン開始、終了位置 -> メイン終了、プロジェクトはデフォルトで主軸に沿って配置されます。

交差軸: 開始位置 ->交差開始、終了位置 -> 交差終了

コンテナ内の 1 つのアイテムが占める主軸のスペースは -> メイン サイズと呼ばれ、交差軸の空間は -> クロス サイズと呼ばれます

3.FLex 属性

flex 属性は、

コンテナ属性

と プロジェクト属性#に分割されます。 ##. コンテナのプロパティ: flex-direction、flex-wrap、flex-flow、justify-content、align-items、align-content

アイテムのプロパティ: order、flex-grow、 flex-shrink、flex-basis、flex、align-self

3.1

Container

Properties

flex-direction

: メインの方向を決定します。軸 (項目の配置方向)

行: 水平方向、左から右 (デフォルト属性) # 行反転: 水平方向、右から左。

列: 垂直方向、上から下。

column-reverse: 垂直方向、下から上。

flex-wrap

: 実行方法を指定します。軸が収まらない場合はラップします。

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

Wrap: 行の折り返し、最初の行が先頭になります

Wrap-reverse:行の折り返し、最初の行が一番下になります (行数のみが反転し、単一行は依然として左から右に配置され、各行が始まります)。

flex-flow

: flex-direction と flex-wrap を組み合わせると、次のようになります。

.box{flex-flow :column Wrap-reverse}

justify-content

: 主軸上の項目の配置を定義します。

flex-start: 左揃え (デフォルト値)、項目は主軸上に配置されます。

flex-start の開始点を配置します。 end: 右揃え、項目は主軸の終点に揃えられます

center: 中央揃え

space-between: 両端に揃え、項目間の間隔は等しくなります

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

align-items

: 交差軸上の項目の配置を定義します (

単一行のみ、複数行の配置 align-content

)

ストレッチによって定義: 項目に高さが設定されていない場合、または自動に設定されている場合、コンテナ全体の高さを占めます (デフォルト値) flex-start: from top Go to the Bottom, take the starting point of Cross axis as the Baseline, and extend to the end point

flex-end: Frombottom to top, take the end point十字軸の終点をベースラインとして、始点に向かって延長します

center: 十字軸アイテムの中点を揃え、アイテムの中点を十字軸の中点に配置します

ベースライン: 行内の各項目のテキストの最初の行に揃えます。

align-content

:

複数の項目がある場合に、交差軸に沿った配置を定義します。コンテナ内の line

アイテム。アイテムに軸が 1 つしかない場合、このプロパティは効果がありません。

ストレッチ: 軸がいっぱいです。交差軸全体 (各行に軸があります)、デフォルト属性 flex-start: 交差軸の始点に位置合わせします。

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

Center: 交差軸の中点に位置合わせします。交差軸

間隔: 複数行の項目が交差軸上で等間隔に配置されます。

前後間隔: 複数行の項目が交差軸の両側にあり、間隔は等しくなります。したがって、交差軸上の項目間の距離は、項目と境界線の間の距離の 2 倍になります。

注: justify-content、align-items、および align-content は、アイテムのプロパティではなく、コンテナのプロパティです。これらは、コンテナ内のアイテムがコンテナ上の特定の位置に配置されるように設定するためのものです。 axis

3.2 プロジェクト属性

order: 項目の順序を定義します。値が小さいほど、配置が高くなります。デフォルト値は次のとおりです。 0、次のように記述します

.item{order:5}

flex-grow: 属性アイテムの拡大率を定義します。デフォルトは 1

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

flex-shrink:アイテムの収縮率、デフォルトは 1

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

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

width または height 属性と同じ値 (350px など) に設定すると、プロジェクトは固定スペースを占有します

flex: flex-grow、flex-shrink、および flex-basis のプロパティを組み合わせると、デフォルト値は 0 1 auto になります。

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

align-self#) ##: 単一の項目を他の項目と整列させることができます。さまざまな整列方法で align-items 属性をオーバーライドできます。デフォルト値は auto で、これは親要素の align-items 属性を継承することを意味します。親要素がない場合は、これは、stretch

と同等です。この属性は 6 つの値を取ることができます。auto を除き、他のすべては align-items 属性とまったく同じです。

[関連する推奨事項:

CSS ビデオ]チュートリアル＃＃＃]＃＃＃＃＃＃

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