Flexbox – スペースを調整して分配する現代的な方法-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-09-20 06:41:06

オリジナル

763 人が閲覧しました

Flexbox – The Modern Way to Align and Distribute Space

レクチャー 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;
}

ログイン後にコピー

この例では: