Flexbox – スペースを調整して分配する現代的な方法

レクチャー 14: フレックスボックス – スペースを調整して分配する現代的な方法

こんにちは！ CSS の最もクールで強力なツールの 1 つを活用する準備はできていますか?今日は、Flexbox について見ていきます。アイテムを整列させたり、スペースを適切に配置したりするのに苦労したことがあれば、Flexbox があなたの新しい親友になります。

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

Flexbox (フレキシブル ボックス レイアウト) は、要素のサイズが不明または動的である場合でも、コンテナ内の要素の配置、間隔、分布を制御できる 1 次元のレイアウト システムです。

Flexbox は、利用可能なスペースに応じて拡大、縮小、または位置合わせできるレイアウトを作成するためのツールボックスと考えてください。

2.魔法は表示から始まります: flex

Flexbox の使用を開始するには、コンテナーで display: flex を設定するだけです。これを行うと、そのコンテナの直接の子はすべて フレックス アイテム になり、すぐに異なる動作を開始します。

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.flex-container {
    display: flex;
}

これで、.flex-container 内のすべてのアイテムはフレックス アイテムとなり、簡単に操作できるようになりました。

3.フレックスディレクション – どちらに進むべきですか?

デフォルトでは、Flexbox は項目を行 (水平) に配置しますが、項目を列 (垂直) に配置したい場合はどうすればよいでしょうか?フレックスボックスでは、flex-direction プロパティを使用して完全に制御できます。

• 行: 項目を水平行に整列させます (これがデフォルトです)。
• 列: 項目を垂直列に積み重ねます。
• row-reverse: row と同じですが、項目の順序が逆になります。
• column-reverse: 列と同じですが、項目は逆の順序で積み重ねられます。

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

これで、アイテムが垂直に積み重なるようになります。

4.コンテンツの正当化 - 物事を広める

品物が 3 つあり、それらをコンテナ内に均等に広げたいとします。ここで justify-content が役に立ちます。

• flex-start: 項目はコンテナーの先頭に揃えられます (デフォルト)。
• center: アイテムは中央に配置されます。
• space-between: 項目は均等な間隔で配置され、最初の項目が先頭に、最後の項目が最後に配置されます。
• space-around: 項目は各項目の周りに均等なパディングで配置されます。

.flex-container {
    display: flex;
    justify-content: space-between;
}

これで、アイテムはコンテナ内に均等な間隔で配置されます。

5.アイテムを揃える – バーティカルマジック

justify-content は水平方向の配置を制御しますが、align-items は垂直方向 (または交差軸に沿った) の配置を処理します。オプションは次のとおりです:

• ストレッチ: アイテムはコンテナーを満たすように伸縮します (デフォルト)。
• flex-start: 項目は上に揃えられます。
• flex-end: 項目は下に揃えられます。
• center: 項目は垂直方向の中央に配置されます。

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

これで、すべてのアイテムがコンテナ内で垂直方向の中央に配置されます。

6. Flex-Grow、Flex-Shrink、および Flex-Basis – フレックス項目の微調整

特定のアイテムを拡大、縮小したり、開始サイズを固定したりしたい場合があります。 flex-grow、flex-shrink、および flex-basis プロパティを使用すると、その動作を制御できます。

• flex-grow: アイテムが他のアイテムと比較してどの程度成長するかを制御します。
• flex-shrink: アイテムが他のアイテムと比較してどれだけ縮小するかを制御します。
• flex-basis: 拡大または縮小する前の項目の初期サイズを設定します。

例:

.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 100px;
}

これにより、アイテムは 100 ピクセルで開始されますが、必要に応じて、縮小することなく拡大して余分なスペースを埋めることができます。

7.実際のフレックスボックスの例

これを例を挙げてまとめてみましょう!

<div class="flex-container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
</div>

.flex-container {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    height: 300px;
    background-color: #f0f0f0;
}

.item {
    background-color: #4CAF50;
    padding: 20px;
    color: white;
    flex-grow: 1;
}

この例では:

• アイテムは一列に配置されます。
• これらは justify-content: space-around で均等に配置されます。
• align-items: center を使用すると、すべてのアイテムがコンテナ内で垂直方向の中央に配置されます。
• flex-grow のおかげで、各項目は利用可能なスペースを均等に埋めるように拡張されます。 1.

8. Flexbox が優れている理由

Flexbox は、CSS で苦労していたレイアウト設計の複雑さの多くを取り除きます。フロートもクリアについて心配する必要もなくなり、レスポンシブ デザインがはるかに簡単になりました!

주요 시사점:

• 컨테이너를 플렉스 컨테이너로 바꾸려면 display: flex를 사용하세요.
• 흐름 방향(행 또는 열)을 설정하려면 flex-direction을 사용하세요.
• justify-content 및 align-items를 사용하여 간격과 정렬을 제어하세요.
• flex-grow, flex-shrink 및 flex-basis를 사용하여 플렉스 항목을 미세 조정하세요.

---

LinkedIn에서 나를 팔로우하세요.

리도이 하산

以上がFlexbox – スペースを調整して分配する現代的な方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。