この講義では、レスポンシブで柔軟なレイアウトの設計に役立つ強力なレイアウト ツールである CSS Flexbox について詳しく説明します。 Flexbox を使用して要素を効率的に配置、配置、順序付けし、デバイス間でのデザインの適応性を高める方法を学びます。
Flexbox は、「Flexible Box Layout」の略で、さまざまな画面サイズに合わせて調整できるレイアウトの設計を容易にする CSS レイアウト モジュールです。これにより、コンテナ内のアイテムの配置を柔軟にし、利用可能なスペースに基づいて動的に整列させることができます。
Flexbox を使い始める前に、その主要コンポーネントを理解しましょう:
コンテナ上で display: flex を設定することで、Flexbox を有効にします。
.flex-container { display: flex; }
これで、.flex-container 内の子要素は Flexbox ルールに従って動作します。
flex-direction は、コンテナ内に flex アイテムが配置される方向を制御します。デフォルトでは、アイテムは一列に配置されます。
値:
例:
.flex-container { display: flex; flex-direction: row; /* You can change to column */ }
justify-content は、フレックス項目を主軸に沿って配置するために使用されます (flex-direction: 行の場合は水平、flex-direction: 列の場合は垂直)。
値:
例:
.flex-container { justify-content: center; }
この例では、フレックス コンテナ内の項目が中央に配置されます。
align-items は、フレックス項目を交差軸 (主軸に垂直) に沿って配置します。
値:
例:
.flex-container { align-items: center; }
デフォルトでは、フレックス項目は 1 行に配置され、コンテンツは収まるように縮小される場合があります。 flex-wrap を使用すると、必要に応じて flex 項目を複数行に折り返すことができます。
値:
例:
.flex-container { flex-wrap: wrap; }
align-content は、複数行のフレックス項目を交差軸に沿って整列させます。これは、コンテナーの交差軸に余分なスペースがあり、フレックス項目が複数行ある場合に使用されます。
値:
例:
.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 */ } }
この例では:
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.
@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.
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!
Ridoy Hasan
以上がCSS フレックスボックスの詳細の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。