CSS Flex レイアウトを使用して 2 列レイアウトを実装する方法

CSS Flex エラスティック レイアウトを使用して 2 列レイアウトを実装する方法

CSS Flex エラスティック レイアウトは、Web ページのレイアウトのプロセスを簡素化し、設計者と開発者は、さまざまな画面サイズに柔軟に適応できるレイアウトを簡単に作成できます。その中でも、2 列レイアウトの実装は、Flex レイアウトの共通要件の 1 つです。この記事では、CSS Flex エラスティック レイアウトを使用して単純な 2 列レイアウトを実装する方法と、具体的なコード例を紹介します。

Flex コンテナとアイテムの使用

Flex レイアウトを使用する場合、レイアウト コンテンツをラップする親コンテナが必要です。このコンテナは Flex コンテナと呼ばれます。 Flex コンテナは、表示プロパティを「flex」または「inline-flex」に設定することで作成できます。具体的には、次のコードを使用して Flex コンテナを作成できます:

<div class="container">
  <!-- 布局的内容 -->
</div>

次に、Flex コンテナに 2 つの子を作成する必要があります。これは 2 列のレイアウトです。これらのサブプロジェクトは Flex プロジェクトと呼ばれます。 Flex コンテナでは、flex プロパティを「1」または他の値に設定することで、各項目のサイズと弾力性を制御できます。具体的には、次のコードを使用して 2 つの Flex プロジェクトを作成できます:

<div class="container">
  <div class="item">
    <!-- 左栏内容 -->
  </div>
  <div class="item">
    <!-- 右栏内容 -->
  </div>
</div>

Set Flex Layout

2 列レイアウトを実現するには、Flex コンテナの関連プロパティを設定する必要があります。そしてプロジェクト。まず、Flex コンテナ内の子を水平に配置する必要があります。これは、コンテナの flex-direction プロパティを「row」に設定することで実現できます。具体的には、次のコードを通じて Flex コンテナのプロパティを設定できます:

.container {
  display: flex;
  flex-direction: row;
}

次に、項目の flex プロパティを設定することで、各項目が占めるスペースを制御できます。ここでは、「fr」（fractional flex-grow property の略）などの相対単位を使用して、子が占める割合を決定できます。具体的には、次のコードを通じて Flex 項目のプロパティを設定できます:

.item {
  flex: 1;
}

ここでは、flex: 1 を使用して、各項目が占めるスペースを等しい比率に設定します。左側の列がより多くのスペースを占めるようにしたい場合は、対応する項目の flex 値を調整できます。たとえば、左側の列では flex プロパティを「2」に設定し、右側の列では flex プロパティを「1」に設定できます。

完全なコード例

以下は、CSS Flex エラスティック レイアウトを使用して単純な 2 列レイアウトを実装する方法を示す完全なコード例です。では、簡単な CSS スタイルを使用して各項目の背景色を設定し、左右の列を区別しました。ニーズに応じてスタイルを追加して、レイアウトを美しくすることができます。

概要

CSS Flex エラスティック レイアウトを使用すると、2 列レイアウトを簡単に実装できます。 Flex コンテナの表示プロパティを「flex」に設定し、次に flex-direction プロパティを「row」に設定し、次に Flex アイテムの flex プロパティを対応する値に設定するだけで、柔軟で適応性のあるレイアウトを実現できます。上記は簡単な例であり、ニーズや設計に応じてコードを調整できます。この記事が CSS Flex エラスティック レイアウトの理解と使用に役立つことを願っています。

以上がCSS Flex レイアウトを使用して 2 列レイアウトを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。