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

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

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

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

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

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

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

    
Item 1
    
Item 2
    
Item 3

.flex-container {
    display: flex;
}

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

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

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

• row: アイテムを水平方向の行に整列させます (これがデフォルトです)。
• column: 項目を垂直列に積み重ねます。
• 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 は垂直方向 (または交差軸に沿った) の配置を処理します。オプションは次のとおりです:

• stretch: アイテムはコンテナを満たすように伸縮します (デフォルト)。
• 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.実際のフレックスボックスの例

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

    
Item 1
    
Item 2
    
Item 3

.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 でフォローしてください -

リドイ・ハサン