HTML チュートリアル: 水平分散に Flexbox を使用する方法-htmlチュートリアル-php.cn

HTML チュートリアル: 水平分散に Flexbox を使用する方法

PHPz

リリース： 2023-10-16 09:39:23

オリジナル

1036 人が閲覧しました

HTML チュートリアル: 水平分散に Flexbox を使用する方法

HTML チュートリアル: Flexbox を使用して水平かつ均等に分散する方法

最新の Web 開発では、柔軟で適応性のあるレイアウトが重要な部分です。 Flexbox (柔軟なレイアウト) は、CSS3 で導入されたレイアウトモデルで、柔軟なコンテナーとサブアイテムのレイアウトを作成するためのシンプルかつ強力な方法を提供します。このチュートリアルでは、Flexbox を使用して水平方向の均等な分散を実現する方法を学びます。

1. 基本的な HTML 構造を作成する

まず、基本的な HTML 構造を作成する必要があります。 body タグで、いくつかのサブ項目を含むコンテナを作成します。各子アイテムは集合的にコンテナーの幅を占め、水平方向に配置されます。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Flexbox水平等分布局</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <div class="item">子项目 1</div>
    <div class="item">子项目 2</div>
    <div class="item">子项目 3</div>
    <div class="item">子项目 4</div>
  </div>
</body>
</html>

ログイン後にコピー

2. スタイルの追加

次に、HTML ファイルにスタイルシート (styles.css) を追加し、その中に Flexbox レイアウトを設定する必要があります。

.container {
  display: flex; /* 将容器设置为Flex布局 */
  justify-content: space-between; /* 控制子项目的水平分布方式 */
  width: 100%; /* 设置容器宽度为100% */
}

.item {
  width: 25%; /* 将每个子项目的宽度设置为25% */
  background-color: #ccc;
  padding: 20px;
}

ログイン後にコピー

上記のコードでは、display: flex を通じてコンテナを Flex レイアウトに設定します。次に、justify-content: space-between を使用して、サブ項目を水平方向にどのように配置するかを指定します。これにより、各サブ項目間の等間隔が維持されます。最後に、各サブ項目の幅を 25% に設定して、水平方向に均等な配分を実現します。

3. コードを実行します

ブラウザで HTML ファイルを開くと、サブプロジェクトがコンテナ内で水平に分散されていることがわかります。各サブアイテム間の間隔は等しく、幅も等しくなります。

4. レイアウトの拡張

Flexbox を使用すると、レイアウトを簡単に拡張できます。たとえば、さらにサブアイテムを追加したい場合は、コンテナに <div class="item">...</div> を追加するだけです。

<div class="container">
  <div class="item">子项目 1</div>
  <div class="item">子项目 2</div>
  <div class="item">子项目 3</div>
  <div class="item">子项目 4</div>
  <div class="item">子项目 5</div>
  <div class="item">子项目 6</div>
</div>

ログイン後にコピー

このようにして、新しいサブプロジェクトはコンテナ内で自動的に水平方向に均等に分散されます。