CSS Flexフレキシブルレイアウトとその応用テクニックを詳しく解説

CSS Flex エラスティック レイアウトとその応用テクニックの詳細な説明

はじめに:
フレキシブル レイアウト (Flex) は、CSS3 で導入された新しいレイアウト モデルです。コンテナ内の子要素のサイズと位置を自動的に調整して、さまざまなコンテナ サイズに適応します。 Flex レイアウトを使用すると、複雑な Web ページ レイアウトを優れた応答性で迅速に実装できます。

1. Flex レイアウトの基本概念
Flex レイアウトは、コンテナーと子要素で構成されます。コンテナーは、display:flex または display:inline-flex 属性を持つ要素であり、子要素はフレックスアイテム。

1.1 コンテナのプロパティ
コンテナは、いくつかのプロパティを通じて Flex アイテムのレイアウトを制御します。一般的に使用されるプロパティは次のとおりです:

• flex-direction: 主軸の方向を設定します。行 (水平方向)、列 (垂直方向)、行反転 (水平方向の反転)、列反転 (垂直方向の反転) を指定できます。
• flex-wrap: ラップする方法は、nowrap (行の折り返しなし)、wrap (行の折り返し)、wrap-reverse (行の折り返しと反転) のいずれかです。
• justify-content: 主軸の位置合わせ。flex-start (開始位置の位置合わせ)、flex-end (終了位置の位置合わせ)、center (中央の位置合わせ)、space-between (両端の位置合わせ)、スペースアラウンド (項目間の等間隔)、スペースアラウンド (各項目の両側の等間隔) を投影します。
• align-items: 交差軸上の位置合わせ。flex-start (開始位置合わせ)、flex-end (終了位置合わせ)、center (中央位置合わせ)、baseline (ベースライン位置合わせ)、stretch (ストレッチ) が可能です。容器を満たすため）。
• align-content: 複数の線の場合、交差軸上の各線の位置合わせは、flex-start (開始位置合わせ)、flex-end (終了位置合わせ)、center (中央位置合わせ)、 space -between (端を揃え、行間の等間隔)、space-around (各行の両側の等間隔)、stretch (コンテナを満たすように引き伸ばされます)。

1.2 Flex アイテムのプロパティ
Flex アイテムは、いくつかのプロパティを通じて独自のレイアウトを制御します。一般的に使用されるプロパティは次のとおりです:

• flex-grow: 倍率を指定します。 item 、デフォルトは 0、つまり増幅なしです。
• flex-shrink: アイテムの収縮率を指定します。デフォルトは 1 です。つまり、スペースが不十分な場合、アイテムは縮小します。
• flex-basis: 余分なスペースを割り当てる前に、アイテムが占める主軸スペースを定義します。
• flex: flex-grow、flex-shrink、flex-basis の略称で、デフォルト値は 0 1 auto です。
• align-self: 単一のアイテムを交差軸上の他のアイテムとは異なる方法で配置できます。

2. Flex レイアウトの応用スキル
Flex レイアウトには、レイアウトをより適切に扱うのに役立つ実際の応用スキルが数多くあります。ここでは、一般的な応用スキルをいくつか紹介します。

2.1 均等な高さのレイアウト
Flex レイアウトを使用すると、均等な高さのレイアウトを簡単に実装できます。コンテナ上で align-items: ストレッチを設定して、すべての Flex アイテムが同じ高さを占めるようにするだけです。交差軸。

サンプル コード:

.container {
  display: flex;
  align-items: stretch;
}

2.2 水平方向の中央揃え
水平方向の中央揃えを実現するには、コンテナ上で justify-content: center を設定するだけです。

サンプル コード:

.container {
  display: flex;
  justify-content: center;
}

2.3 垂直方向の中央揃え
垂直方向の中央揃えを実現するには、コンテナ上で align-items: center を設定するだけです。

サンプル コード:

.container {
  display: flex;
  align-items: center;
}

2.4 適応型の左右の列
左の列の幅は固定されており、右の列はコンテナーの残りの幅に応じて適応します。

サンプル コード:

.container {
  display: flex;
}

.left {
  flex: 0 0 200px; /* 左栏宽度为200px */
}

.right {
  flex: 1; /* 右栏自适应宽度 */
}

2.5 順序調整
Flex レイアウトでは、order 属性を通じて Flex アイテムの順序を調整できます。

サンプルコード:

.container {
  display: flex;
}

.first {
  order: 2; /* 放到第二位 */
}

.second {
  order: 1; /* 放到第一位 */
}

結論:
Flex レイアウトの属性と技術を柔軟に使用することで、さまざまな複雑な Web ページ レイアウトを応答性よく簡単に実装できます。 Flex レイアウトをマスターすると、CSS レイアウト機能が大幅に向上します。

概要:
この記事では、CSS Flex エラスティック レイアウトの基本概念と共通プロパティを詳細に紹介し、いくつかの一般的なアプリケーション スキルも共有します。この記事での紹介が読者の Flex レイアウトの理解と使用に役立ち、Web ページ レイアウトの有効性と開発効率が向上することを願っています。

参考:

• CSS トリック - フレックスボックスの完全ガイド: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• MDN Web ドキュメント - フレックスボックス: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

以上がCSS Flexフレキシブルレイアウトとその応用テクニックを詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。