CSS Flexbox を理解する: 初心者ガイド!!!-CSSチュートリアル-php.cn

Understanding CSS Flexbox: A Beginners Guide!!!

？目次

CSS フレックスボックスの概要
必須のプロパティ
高度なプロパティ
結論

?️ CSS フレックスボックスの概要

CSS Flexbox は、レイアウトの問題すべてに対する究極のソリューションです。この記事では、Flexbox をマスターすることに完全に焦点を当て、そのプロパティと、それを使用して驚くほどレスポンシブなデザインを簡単に作成する方法について説明します。それでは、これらのレイアウトをシームレスにしてみましょう。

フレキシブルボックスレイアウト (フレックスボックス) は、項目を行または列の 1 つの軸に沿って配置する 1 次元のレイアウト方法です。あなたが私のような視覚的な学習者であれば、おそらくあまり意味がないと思われるので、絵を描いてみましょう -

お気に入りのものでいっぱいの箱があると想像してください。それは本やお気に入りのスナックなど、船を揺るがすものなら何でも構いませんが、それらは完全に混乱しています。 Flexbox は、窮地を救うために、ひとつまみの OCD を備えた魔法のオーガナイザーのようなものです。ニーズに合わせてすべてを行と列にきちんと配置します。

項目を均等に配置する場合でも、片側にグループ化する場合でも、完全に中央に配置する場合でも、Flexbox が最適です。 Flexbox が OCD のオーガナイザーであることがわかったので、魔法を実現するために Flexbox が使用するツールについて詳しく見ていきましょう。その重要なプロパティは次のとおりです:

** 必須プロパティ **

1. 表示: flex: ここからすべてが始まります。このプロパティをコンテナ (お気に入りのスナックが入ったボックス) に追加すると、すべてのスナック (子要素) がデフォルトで 1 つの軸 (行) に沿って整然と並びます。ただし、心配しないでください。必要に応じて列に切り替えることができます!"

注: CodePen のサンプルを操作するには、図の右上隅にある [CodePen で編集] テキストをクリックします。これにより、コードをライブで試すことができます!

CodePen の値を試してみる:

2. flex-direction: これは、スナックがどの方向に並ぶかを決定します。デフォルトではスナックは一列に並ぶことを覚えておいてください。しかし、flex direction はそれを変更する力を与えます。その値は次のとおりです:

a. row(default): スナックは左から右に整然と並んでいます。

b. row-reverse: アイテムの方向が反転して右から左に並ぶので、ちょっと反抗的な気分になったときに最適です!

c.列: アイテムはまるでスナックタワーのように垂直に積み上げられます。各スナック (またはフレックスアイテム) を重ねて配置し、おいしいスナックタワーを形成しているところを想像してください。

d. column-reverse: スタックは下から始まり、積み上がっていきます。

これは図です。フレックス方向の値を自由に変更して、それらがどのように機能するかを確認してください。

3. Justify-content: これはフレックスコンテナーの魔法の杖で、スナック間のスペースを分配するために使用します。それはスナックボックスの中でスナックがどのように配置されるかを決定するようなものです。主なオプションは次のとおりです:

a. flex-start(default): すべてのスナックは行または列の先頭に集まります。

b. flex-end: すべてのスナックは行または列の最後に集まります。

c. center: スナックは行または列の中央に集まります。

d. space-between: 最初のスナックは先頭にプッシュされ、最後のスナックは最後にプッシュされ、残りはそれらの間に均等な間隔で配置されます。

e。 space-around: スナックの周囲に均等なスペースが確保されます。

f.均等なスペース: スナックは周囲に完全に均等なスペースを確保します。

これは図です。どのように機能するかを確認できるように、justify-content の値を自由に変更してください。

4. Align-items: フレックス方向を使用してスナックを行または列に配置しました。今度は、スナックコンテナー内でスナックをどのくらいの高さまたは低さに配置するかを決定します。一般的な値は次のとおりです:

a. flex-start: 項目を交差軸の開始位置に揃えます。

b. flex-end: 項目を交差軸の端に揃えます。

c. center: 項目を交差軸に沿って中央に配置します。

d.ストレッチ: コンテナを満たすようにアイテムを引き伸ばします (ブロックレベルのアイテムのデフォルト)。

e。ベースライン: アイテムをテキストのベースラインに沿って配置します。

Align-Items の動作を見てみましょう。

以下のコードペンを探索して、魔法の動作を確認してください。 CSS を自由に調整して、配置がどのように変化するかを確認してください。

** 詳細プロパティ **

1. Align-content: align-content プロパティは、フレックスコンテナー (スナックコンテナー) 内で複数行のフレックスアイテム (またはスナック) を交差軸に沿って配置する方法を指定します。これは、フレックスアイテムの行または列が複数ある場合にのみ機能します。つまり、フレックスコンテナーにはラップされたコンテンツ (flex-wrap: Wrap) が必要です。

Align-content の値

a. flex-start: スナックのすべての列がスナックコンテナーの上部に集められ、コンテナーの残りの部分はかなり空になったように感じられます。

b. flex-end: スナックの列がスナック容器の底に集められ、その結果、上部に空きスペースが残ります (上部に孤立)。

c.中央: スナックの列が中央に集められ、スナック容器の上部と下部に空きスペースが残ります。

d. space-between: スナックの行は均等な間隔で配置され、最初の行が一番上、最後の行が一番下になります。

e。 space-around: 行は行間に等しい間隔で配置されます。

f. space-evenly: 行間には等しいスペースがあります。

g。ストレッチ(デフォルト): 私たちのスナックはすべて「ストレッチ」し、スナックコンテナの高さを満たすようにします。

言葉はもう十分です。臨機応変に行動に移してみましょう (私がそこで何をしたのかわかりますか?誰もいませんか?分かった?‍♀️)。

align-content の値を flex-start、flex-end、center、space-between、space-around、space-evenly、またはstretchに置き換えて、変化を観察できます。

インタラクティブなイラストについては、この CodePen をチェックしてください!

?アイテムの整列とコンテンツの整列: 違いは何ですか?
似ているように聞こえますが、align-items と align-content は同じではありません。違いを明確にしましょう:

align-items は、個々のフレックス項目を交差軸に沿って整列させます。これは、単一の行/列内の項目自体の配置を設定するものと考えてください。

align-content は、フレックスコンテナーの交差軸に沿って項目の複数行を整列します (ラッピングがアクティブな場合、つまり flex-wrap: Wrap の場合)。

?重要なポイント:
align-items は 1 つのフレックスコンテナ内のすべての項目を処理しますが、align-content は複数行の項目を処理します (ラップされた行が複数ある場合のみ)。

** 覚えておいてください**:

Property	Focus Area	When to use
Align-items	Align individual items	When you are adjusting the vertical alignment of single items
Align-content	Align rows of items	When flex-wrap: wrap is used (and there are multiple rows)