CSS フレックスボックスの詳細

レクチャー 8: CSS Flexbox のマスター - 詳細

この講義では、レスポンシブで柔軟なレイアウトの設計に役立つ強力なレイアウト ツールである CSS Flexbox について詳しく説明します。 Flexbox を使用して要素を効率的に配置、配置、順序付けし、デバイス間でのデザインの適応性を高める方法を学びます。

フレックスボックスとは何ですか?

Flexbox は、「Flexible Box Layout」の略で、さまざまな画面サイズに合わせて調整できるレイアウトの設計を容易にする CSS レイアウト モジュールです。これにより、コンテナ内のアイテムの配置を柔軟にし、利用可能なスペースに基づいて動的に整列させることができます。

1.フレックスボックスの用語

Flexbox を使い始める前に、その主要コンポーネントを理解しましょう:

• Flex Container: Flex アイテムを保持する親要素。
• フレックス項目: フレックスコンテナ内の子要素。

コンテナ上で display: flex を設定することで、Flexbox を有効にします。

• 例:

  .flex-container {
    display: flex;
  }

これで、.flex-container 内の子要素は Flexbox ルールに従って動作します。

2.フレックス方向

flex-direction は、コンテナ内に flex アイテムが配置される方向を制御します。デフォルトでは、アイテムは一列に配置されます。

• 値:

  • row: 項目は水平方向に配置されます (デフォルト)。
  • row-reverse: 項目は水平方向に逆順に配置されます。
  • 列: アイテムは縦に並べられます。
  • column-reverse: 項目は垂直方向に逆順に配置されます。

• 例:
  
  

  .flex-container {
    display: flex;
    flex-direction: row; /* You can change to column */
  }

3.コンテンツを正当化する

justify-content は、フレックス項目を主軸に沿って配置するために使用されます (flex-direction: 行の場合は水平、flex-direction: 列の場合は垂直)。

• 値:

  • flex-start: 項目を先頭に揃えます。
  • flex-end: 項目を最後に揃えます。
  • center: 項目を中央に配置します。
  • space-between: 最初の項目が始まり、最後の項目が終わりになるように項目を広げます。
  • space-around: 各項目の周囲に均等なスペースを追加します。

• 例:
  
  

  .flex-container {
    justify-content: center;
  }

この例では、フレックス コンテナ内の項目が中央に配置されます。

4.アイテムを整列させる

align-items は、フレックス項目を交差軸 (主軸に垂直) に沿って配置します。

• 値:

  • ストレッチ: コンテナを満たすようにアイテムを引き伸ばします (デフォルト)。
  • flex-start: 項目を交差軸の開始位置に揃えます。
  • flex-end: 項目を交差軸の端に揃えます。
  • center: 項目を交差軸に沿って中央に配置します。

• 例:
  
  

  .flex-container {
    align-items: center;
  }

5.フレックスラップ

デフォルトでは、フレックス項目は 1 行に配置され、コンテンツは収まるように縮小される場合があります。 flex-wrap を使用すると、必要に応じて flex 項目を複数行に折り返すことができます。

• 値:

  • nowrap: 項目は 1 行に表示されます (デフォルト)。
  • ラップ: 項目は複数行に折り返されます。
  • Wrap-reverse: 項目は複数行に折り返されますが、順序は逆になります。

• 例:
  
  

  .flex-container {
    flex-wrap: wrap;
  }

6.コンテンツの整列

align-content は、複数行のフレックス項目を交差軸に沿って整列させます。これは、コンテナーの交差軸に余分なスペースがあり、フレックス項目が複数行ある場合に使用されます。

• 値:

  • flex-start: 行を開始方向にパックします。
  • flex-end: 行を末尾に向かって詰め込みます。
  • center: 線を中心に向かって詰めます。
  • space-between: 行間にスペースを入れて均等に配置します。
  • space-around: 周囲にスペースを設けて線を均等に配置します。
  • ストレッチ: 行を引き伸ばして、利用可能なスペースを占有します。

• 例:
  
  

  .flex-container {
    align-content: space-between;
  }

実践例: レスポンシブフォトギャラリーの作成

Flexbox を使用してレスポンシブなフォト ギャラリーを作成しましょう。

HTML:

<div class="gallery">
  <div class="gallery-item">Image 1</div>
  <div class="gallery-item">Image 2</div>
  <div class="gallery-item">Image 3</div>
  <div class="gallery-item">Image 4</div>
  <div class="gallery-item">Image 5</div>
</div>

CSS:

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  gap: 10px;
  padding: 20px;
}

.gallery-item {
  flex-basis: calc(25% - 20px); /* Four items per row */
  background-color: #ddd;
  padding: 20px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .gallery-item {
    flex-basis: calc(50% - 20px); /* Two items per row on smaller screens */
  }
}

この例では:

• The .gallery container uses Flexbox to wrap the items and spread them evenly.
• Each .gallery-item takes up 25% of the container width, minus the gap.
• On smaller screens (below 768px), the items adjust to 50% width for better readability.

Responsive Design with Flexbox

Flexbox is a powerful tool for responsive design. You can easily adjust the layout by changing flex properties based on the screen size using media queries.

• Example:

  @media screen and (max-width: 600px) {
    .gallery-item {
      flex-basis: 100%; /* Items take up full width on small screens */
    }
  }

With this media query, on screens smaller than 600px, each gallery item will take up the full width of the container.

Practice Exercises

1. Create a navigation bar using Flexbox, with the logo on the left and the links on the right.
2. Create a three-column layout that wraps into one column on smaller screens.
3. Use justify-content and align-items to create different layouts, like a centered section or a footer with evenly spaced links.

Next Up: In the next lecture, we’ll explore CSS Grid - A Deep Dive, where you’ll learn about CSS Grid and how it compares to Flexbox for building complex layouts. Stay tuned!

follow me on LinkedIn-

Ridoy Hasan

以上がCSS フレックスボックスの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。