CSS Flexフレキシブルレイアウトとその応用テクニックを詳しく解説-CSSチュートリアル-php.cn

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

PHPz

リリース： 2023-09-27 14:36:34

オリジナル

1527 人が閲覧しました

详解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 サイトの他の関連記事を参照してください。