HTML5におけるフレックスボックスの意味

HTML5 では、フレックスボックスは、ページがさまざまな画面サイズやデバイスの種類に適応する必要がある場合に、要素が適切に動作するようにするレイアウト メソッドです。フレックスボックス レイアウトを導入する目的は、より効果的な配置方法を提供することです。 、コンテナ内の子要素に空白を配置して割り当てます。

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

フレックスボックスの意味

フレキシブル ボックス (FlexibleBox または flexbox) は、ページをさまざまな画面サイズに適応させる必要がある場合に、要素に適切なコンテンツが含まれるようにする方法です。デバイスの種類、動作のレイアウト方法。

フレキシブル ボックス レイアウト モデルを導入する目的は、コンテナ内のサブ要素に空きスペースを配置、整列、割り当てるためのより効率的な方法を提供することです。

一般的な複雑なレイアウトの多くのニーズを簡単な方法で満たすことができます。その利点は、開発者が特定の実装方法を指定せずに、レイアウトが持つべき動作を宣言するだけであることです。実際のレイアウトはブラウザーが担当します。このレイアウト モデルは、主要なブラウザでサポートされています。

フレキシブル ボックスの基本属性:

**フレキシブル ボックスのレイアウト: display: flex; または display: inline-flex;

2 つの違いは次のとおりです。 in display: block ;display: inline-block; との違い (親要素を 1 行で表示できるか)

フレキシブル ボックスの役割: 子要素は 1 行で表示できます (デフォルトでは x)は主軸、y は側軸 (副軸)

したがって、float: lef; 便利なレイアウトと同様に、子要素はデフォルトで 1 行に表示されます

フレキシブルボックスに設定後:

1. 子要素はデフォルトで主軸に配置されます;

2. 子要素は幅を設定できますand height; (display: inline-block; と同様)

3. 親要素がフレキシブル ボックスの場合、子要素を上下左右の中央に配置したい場合は、マージンだけを指定します。 auto;

フレキシブル ボックスが設定されている場合の子要素への影響:

1. 子要素の Float および Clear は無効です;

2. サブ要素vertical: -align:; (要素の垂直方向の配置) は無効です。

親要素に追加された属性 (親要素に追加され、子要素に影響します)

主軸と副軸を設定する方法:
Flex-方向: 行 ;水平スピンドル
flex-direction: row-reverse; 垂直スピンドル
.
サブ要素がラップされているかどうか? flex-wrap:

1. ラップWrap; 2. no-warp: 行折り返しなし;

3. Wrap-reverse; 逆行折り返し;

略称: flex-flow:; (主軸改行方法の設定) (コードの読みやすさに影響するため、この設定は推奨されません)

justify-content:;子要素は主軸の配置にあります:

## を追加します。 # 親要素へ 1. flex-start; 開始位置 2. flex-end; 終了位置 3. center; 中間位置

4. space-around; 完全に自動的に割り当てられます;

5 . space-between; 両端揃え、中央に自動配置;


align-items:; 子要素を横軸に揃える方法（親要素に追加）

1. flex-start; 開始位置 2. flex-end; 終了位置 3. 中心; 中間点の位置

4 、ベースライン; ベースラインの位置合わせ

5. ストレッチ; デフォルトの位置alignment

##align-content:; 交差軸上の複数行要素の配置、複数行要素は有効です

1. flex-start; 上部配置;

2. フレックスエンド; 下部の配置; 3. 中央; 中央の配置; 4. スペースアラウンド; 完全に自動割り当て;

5. スペース間の; 両端を自動的に配置中央に割り当て;

6. ストレッチ; デフォルトの位置配置;


Item (サブ要素の配置) (サブ要素に追加)

align-self:; 交差軸上の子要素の配置;
flex-start 開始位置
flex-end 終了位置
center センタリング
ストレッチ (この要素は幅を設定しません)または高さ)
自動デフォルト値
注: 親要素にこの属性が設定されている場合は、 alig-items:;属性設定を継承します

関連する推奨事項:html ビデオチュートリアル,cssビデオチュートリアル

以上がHTML5におけるフレックスボックスの意味の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。