CSS3 のフレックス レイアウト スキルをマスターして、最新の Web インターフェイスを簡単に構築します。

CSS3 のフレックス レイアウト スキルをマスターして、最新の Web インターフェイスを簡単に構築します。

インターネットが急速に発展した今日の時代において、Web デザインは重要な分野となっています。 Web インターフェイスに対するユーザーのニーズを満たすために、開発者は新しいテクノロジーを探索し、使用し続けて、より現代的で魅力的な Web ページを構築しています。その中でも、CSS3 のフレックス レイアウトは、開発者が Web ページ要素をより柔軟にレイアウトするのに役立つ技術です。

いわゆるフレックス レイアウト、つまりフレキシブル ボックス レイアウトは、コンテナーのサイズとレイアウト規則に従って要素の位置とサイズを自動的に調整できるレスポンシブなレイアウト方法です。従来のボックス モデル レイアウトと比較して、フレックス レイアウトはより便利で柔軟であり、さまざまな画面サイズやデバイス タイプに適応できます。

フレックス レイアウトの使用を開始する前に、まずいくつかの基本概念を理解する必要があります。 Flex レイアウトには次の 3 つの属性があります:

1. Flex コンテナ (フレックス コンテナ): フレックス レイアウトを使用する要素をコンテナと呼び、表示属性を flex または inline-flex に設定することで、要素を次のように設定できます。フレキシブルなボックスコンテナ。

2. フレックスアイテム: コンテナ内の各サブ要素はアイテムと呼ばれ、その配置、サイズ、その他のスタイル属性を設定できます。

3. フレックス軸: flex-direction 属性を使用すると、コンテナ内のアイテムの配置方向を指定できます。フレックス軸は、配置方向によって形成される軸です。

フレックス レイアウトのテクニックを詳しく説明する前に、フレックス レイアウトの基本的な使用法を理解するために簡単な例を見てみましょう:

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

<style>
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #ff9900;
}
</style>

上記のコードでは、コンテナーと Set を作成します。コンテナは表示属性を通じてレイアウトを変更します。次に、justify-content 属性によって項目間の配置が space-between に設定され、項目間の間隔が等しくなるようにします。次に、align-items 属性を使用して、交差軸上の項目の配置を中央揃え、つまり垂直方向の中央揃えに設定します。

プロジェクトのスタイルでは、プロジェクトが残りのスペースを均等に分配できるように、flex プロパティを 1 に設定します。同時に、プロジェクトの高さが 100px に設定され、プロジェクトの背景色が設定されます。

上記の例は、フレックス レイアウトを使用して行を二等分する効果を実現する方法を示しています。以下では、その他の一般的に使用されるフレックス レイアウト手法をいくつか紹介します。

1. 同じ幅の 3 列レイアウト

<div class="container">
  <div class="item">项目1</div>
  <div class="item">项目2</div>
  <div class="item">项目3</div>
</div>

<style>
.container {
  display: flex;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #ff9900;
}
</style>

コンテナをフレックス レイアウトに設定し、アイテムの flex プロパティを 1 に設定することで、3 列レイアウトを実現できます。同じ幅で。

2. 同じ高さの2列レイアウト

<div class="container">
  <div class="left-item">左侧项目</div>
  <div class="right-item">右侧项目</div>
</div>

<style>
.container {
  display: flex;
}

.left-item {
  flex: 1;
  height: 200px;
  background-color: #ff9900;
}

.right-item {
  flex: 1;
  height: 200px;
  background-color: #00ccff;
}
</style>

コンテナをフレックスレイアウトに設定し、左右のアイテムのフレックスプロパティを1に設定することで、2列を実現できます。同じ高さのレイアウト効果。

3. 水平方向と垂直方向のセンタリング

<div class="container">
  <div class="item">项目</div>
</div>

<style>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  background-color: #ff9900;
}

.item {
  flex: 1;
  height: 100px;
  background-color: #00ccff;
}
</style>

コンテナをフレックス レイアウトに設定し、justify-content プロパティと align-items プロパティの両方を center に設定することで、水平方向と垂直方向のセンタリングを実現できます。効果。

上記の例を通して、CSS3 のフレックス レイアウト テクノロジを使用すると、最新の Web インターフェイスをより簡単かつ柔軟に構築できることがわかります。コンテナーとプロジェクトのプロパティを適切に設定することで、Web インターフェイスに対するユーザーの要件を満たすさまざまなレイアウト効果を実現できます。実際の開発では、必要に応じてさまざまなフレックス レイアウト手法を柔軟に使用して、魅力的で応答性の高い Web インターフェイスを構築できます。

以上がCSS3 のフレックス レイアウト スキルをマスターして、最新の Web インターフェイスを簡単に構築します。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。