CSS Flexbox を理解する: 初心者ガイド!!!

？目次

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

---

?️ 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)

2. Flex-wrap: このプロパティは、フレックス アイテム (別名、お気に入りのスナック) をすべて 1 つの行/列に詰め込むか、スペースがなくなったときに複数の行/列に丁寧にラップするかを決定します。

その値は次のとおりです:

a. nowrap(デフォルト): スナックは呼吸するスペースが要らないと判断し、ただ列/列に窮屈なままにしておきます。

b. Wrap: ここで、彼らはスペースが欲しいので、最初の行/列にスペースがなくなったら、次の行または列にスピルします。

c .wrap-reverse: Wrap とほぼ同じですが、逆の方法で実行されます。フレックスの方向に応じて、下から上または右から左。

これは、flex-wrap プロパティの動作を示す CodePen です。さまざまな値 (nowrap、wrap、wrap-reverse) を試して、フレックス コンテナーがスナックのオーバーフローをどのように処理するかを確認できます。

3. Flex: これは、フレックス コンテナ内の利用可能なスペースに合わせてフレックス アイテム (スナック) がどのように拡大または縮小するかを設定する決定的なプロパティです。これは 3 つのサブプロパティの短縮形です:

a. flex-grow: flex-item がどれだけ成長するかを決定します。

b. flex-shrink: スペースが狭い場合に flex-item がどの程度縮小するかを決定します。

c. flex-basis: 項目が拡大または縮小し始める前の開始サイズを決定します。

これは、flex プロパティとそのコンポーネントを示す CodePen です

自由に開いて操作して、フレックス値を調整すると項目のレイアウトがどのように変化するかを確認してください。

4. Align-self: このプロパティは、フレックス コンテナーの項目の整列値をオーバーライドします。基本的に項目を交差軸上に揃えます。その値は次のとおりです:

a. auto (デフォルト): コンテナの align-items プロパティから配置を継承します。

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

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

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

e。ストレッチ: 交差軸を満たすようにアイテムを引き伸ばします (サイズが固定されていない場合)。

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

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

?結論
CSS Flexbox は、レイアウトへのアプローチ方法を簡素化します。表示などのいくつかの重要なプロパティ: flex、flex-direction、justify-content、align-items を使用すると、レスポンシブで美しく整列したデザインを簡単に作成できます。

?もっと深く潜ってみたいですか？ここにいくつかの素晴らしいリソースがあります:

1. CSS のトリック: フレックスボックスの完全ガイド

すべての Flexbox プロパティとユースケースをカバーする詳細なガイド。

1. MDN Web ドキュメント - CSS フレックスボックス

説明、例、ブラウザの互換性を含む公式ドキュメント。

何事もマスターするには継続的な練習が鍵となりますので、理解を確実にするためにできるだけ練習するようにしてください。これらのツールを使って遊べば遊ぶほど、美しいレイアウトを作成する能力に自信が持てるようになります。

次回まで、あなたのフレンドリーな近所のライター（はい、それは私の頭では理にかなっています）。 ?さようなら!!!

以上がCSS Flexbox を理解する: 初心者ガイド!!!の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。