CSS フレックスボックスレイアウト: フレキシブルボックスレイアウトを使用して、柔軟なレイアウト構造を実現します。-CSSチュートリアル-php.cn

CSS フレックスボックスレイアウト: フレキシブルボックスレイアウトを使用して、柔軟なレイアウト構造を実現します。

WBOY

リリース： 2023-11-18 17:30:03

オリジナル

1103 人が閲覧しました

CSS Flexbox布局：利用弹性盒子布局实现灵活的布局结构

CSS フレックスボックスレイアウト: 柔軟なレイアウト構造の実装

はじめに:
フロントエンド開発では、ページレイアウトは重要なリンクです。フローティングやポジショニングの使用などの従来のレイアウト方法では、設計が標準化に準拠していない場合に一連の問題が発生することがあります。これらの問題を克服するために、CSS3 では Flexbox レイアウトを導入しました。これにより、開発者はより柔軟で強力なページレイアウトソリューションを提供できます。

フレックスボックスレイアウトの原理は、コンテナとコンテナ内のアイテム (フレックスアイテム) をそれぞれ水平軸と垂直軸に配置し、弾力性を利用してアイテムを分散して整列させることです。このレイアウト方法は、レスポンシブでアダプティブなページレイアウトを構築するのに非常に適しています。

Flex コンテナと Flex アイテム:
Flexbox レイアウトを使用して、親コンテナにレイアウトしたい要素をラップする必要があります。この親コンテナは Flex コンテナと呼ばれ、表示プロパティを flex または inline-flex に設定することで Flexbox レイアウトを有効にします。

Flex アイテム (フレックスアイテム) は、Flex コンテナ内の直接の子要素です。これらはレイアウトの基本単位です。 Flex アイテムには、order、flex-grow、flex-shrink、flex-basis、align-self などのプロパティがあり、これらを使用して親コンテナ内での配置と動作を定義できます。

基本レイアウトプロパティ:
Flexbox レイアウトでは、Flex コンテナと Flex アイテムの動作を制御するために使用される基本プロパティがいくつかあります。

flex-direction プロパティ: Flex コンテナ内の Flex アイテムの配置方向を定義するために使用されます。その値は、行 (水平、デフォルト)、行反転 (水平反転)、列 (垂直)、または列反転 (垂直反転) です。
justify-content 属性: 主軸上の Flex アイテムの配置を定義するために使用されます。その値は、flex-start (デフォルト、左揃え)、flex-end (右揃え)、center (中央揃え)、space-between (両端揃え、項目間の等間隔)、または space-around のいずれかです。 (アイテムは両端に揃えられます。両側に等間隔に配置されます)。
align-items 属性: 交差軸上の Flex アイテムの配置を定義するために使用されます。その値は、flex-start (デフォルト、上部の配置)、flex-end (下部の配置)、center (中央の配置)、baseline (配置のベースライン)、またはストレッチ (ストレッチフィル) です。

デモの例:
次は、Flexbox レイアウトを使用した簡単なページレイアウトの例です。具体的なコードは次のとおりです:

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 300px;
      border: 1px solid #ccc;
    }
    
    .item {
      border: 1px solid #f00;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Flex Item 1</div>
    <div class="item">Flex Item 2</div>
    <div class="item">Flex Item 3</div>
  </div>
</body>
</html>

ログイン後にコピー

この例では、Flex コンテナを作成しました(クラス名 .container) を選択し、そのスタイルを display: flex に設定して、Flexbox レイアウトを有効にします。コンテナ内の 3 つの子要素 (クラス名 .item) が Flex アイテムになります。

justify-content: center と align-items: center を設定することで、Flex アイテムを主軸と交差軸の両方で中央揃えにします。同時に、効果をよりよく表示するために、コンテナの高さを 300 ピクセルに設定し、境界線のスタイルも設定します。

概要:
CSS Flexbox レイアウトは、開発者がさまざまなレイアウト構造を簡単に実装できる強力で柔軟なページレイアウトソリューションです。 Flex コンテナと Flex アイテムのプロパティを設定することで、主軸と交差軸での配置と配置を制御できます。

上記の例は、Flexbox レイアウトの単純な適用例にすぎません。実際の開発では、さらに多くの属性とテクニックを使用して、特定のニーズに応じて複雑なレイアウト構造を構築できます。この記事が CSS Flexbox レイアウトの理解と適用に役立つことを願っています。

以上がCSS フレックスボックスレイアウト: フレキシブルボックスレイアウトを使用して、柔軟なレイアウト構造を実現します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。