Flexbox のマスタリング: レスポンシブレイアウトの構築に関する私の研究メモ-CSSチュートリアル-php.cn

Mastering Flexbox: My Study Notes on Building Responsive Layouts

それでは、コーヒーを飲みましょう (またはお茶、私たちは判断しません) そして Flexbox の世界に飛び込みましょう! Web ページをどのデバイスでも見栄え良くしようとしてイライラしたことがあるなら、心配しないでください。あなたは一人ではありません。 Flexbox は窮地を救うためにここにあります。信じてください、思っているほど怖いものではありません!

Flexbox とは一体何ですか?

Flexbox は個人的なレイアウトアシスタントのようなもので、魔法のようにアイテムを簡単に配置できます。苦労せずにフレックスコンテナをセットアップしてコンテンツを整理する方法を学びましょう。

CSS のこの強力かつ効率的なレイアウトモデルを使用すると、コンテナ内で要素を即応的かつ柔軟に整理および配置できます。複雑な計算や位置調整を必要とせずに、項目間のスペースの調整と配分が簡単に行えます。 Flexbox は、可能な限り単純な方法で 1 次元レイアウト (行または列) を処理するために構築されました。

実際の例と、よくある間違いを避けるためのヒントを見ていきましょう。朝のコーヒーのように、デザインがスムーズに保たれるように。

Flexbox をより深く理解するために、Flexbox を 2 つの主要な部分に分けてみましょう:

フレックスコンテナ (親コンテナ) のプロパティ:

フレックス方向
フレックスラップ
フレックスフロー
コンテンツの正当化
アイテムの配置
コンテンツの整列

まず最初に、親コンテナに「display: flex」を設定する必要があります。これにより、Flexbox がアクティブになり、すべてのプロパティをコンテナーとそのアイテムに適用できるようになります。

display:flex

ログイン後にコピー

フレックス方向

flex-direction: 
row | row-reverse | column | column-reverse

ログイン後にコピー

コンテナ内のアイテムの主な方向を定義します。方向を指定しない場合は、デフォルトが適用されます:

行 (デフォルト): 項目は行のように水平方向に編成されます。
row-reverse: 項目は水平方向に逆に編成されます。
列: 項目は縦方向に整理されます。
column-reverse: 項目は垂直方向に逆順に編成されます。 ####フレックスラップ

flex-wrap
nowrap | wrap | wrap-reverse

ログイン後にコピー

項目を複数の行/列に分割するかどうかを制御します:

nowrap (デフォルト): 項目は 1 行/列に留まります。
ラップ: 項目が収まらない場合、項目は新しい行/列に折り返されます。
Wrap-reverse: 項目は逆に折り返されます。

フレックスフロー

flex-flow

ログイン後にコピー

flex-direction プロパティと flex-wrap プロパティの短縮形。これらを合わせて主軸と交差軸を定義します。デフォルト: 行nowrap.

コンテンツの正当化

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

ログイン後にコピー

主軸 (flex-direction で設定された方向) に沿って項目を整列します:

flex-start: アイテムはコンテナーの先頭に整列します。
flex-end: アイテムはコンテナーの最後に整列します。
center: アイテムは中央に配置されます。
space-between: 項目間には余分なスペースがあり、等間隔に配置されます。
space-around: アイテムの周囲には均等なスペースがあります。
均等な空間: アイテム間とアイテムの周囲に均等なスペースがあります。

アイテムの整列

display:flex

ログイン後にコピー

項目を交差軸 (主軸に垂直) に配置します:

ストレッチ (デフォルト): アイテムはコンテナーを満たすように伸縮します。
flex-start: 項目は交差軸の開始位置に整列します。
flex-end: 項目は交差軸の端に整列します。
center: アイテムは中央に配置されます。
ベースライン: アイテムはコンテンツのベースラインと一致します。

コンテンツの整列

flex-direction: 
row | row-reverse | column | column-reverse

ログイン後にコピー

フレックス項目が複数行ある場合、コンテナの行を整列させます:

align-items と同様のオプションですが、複数の行に適用されます。

また、Flexbox に限定されたものではありませんが、ギャップは Flexbox レイアウトのスタイルを設定するのによく役立ちます。

flex-wrap
nowrap | wrap | wrap-reverse

ログイン後にコピー

フレックス項目 (子コンテナ) に適用できるプロパティ:

注文
フレックスグロー
フレックスシュリンク
フレックスベース
フレックス
自己調整

注文

flex-flow

ログイン後にコピー

フレックス項目の視覚的な順序を制御します。すべての項目のデフォルトは 0 ですが、より大きいまたは小さい数値を設定して順序を変更できます。

フレックスグロー

justify-content
flex-star | flex-end | space-between | space-around | space-evenly

ログイン後にコピー

余分なスペースがある場合にアイテムが占有するスペースの量を定義します。すべての項目に flex-grow: 1 が設定されている場合、追加のスペースが均等に共有されます。

フレックスシュリンク

align-items 
stretch | flex-start | flex-end | center | baseline

ログイン後にコピー

スペースが狭い場合にアイテムをどの程度縮小するかを定義します。デフォルトは 1 (項目は縮小可能)。 0 は縮小を防ぎます。

フレックスベース

align-content

ログイン後にコピー

スペースが分配される前の項目の初期サイズを設定します。ピクセル、パーセンテージ、または自動で指定できます。

フレックス

gap: 10px 20px /*or*/
row-gap: 10px
colunm-gap: 20px

ログイン後にコピー

flex-grow、flex-shrink、および flex-basis を一度に設定するための省略表現。たとえば、flex: 1 1 200px;項目が 200 ピクセルの基本サイズで拡大および縮小できることを意味します。

整列自己

e.g., order: 2

ログイン後にコピー

個々の項目を他の項目とは異なる方法で整列させます (align-item をオーバーライドします)。デフォルトでは、コンテナの align-items 値が使用されます。

このコードは、実際の Flexbox プロパティを調べたり、CSS スタイルを試したりするための完璧な出発点となります。

<!DOCTYPE html>
<html lang="ja">

  <メタ文字セット="UTF-8">
  <meta name="viewport" content="width=device-width、initial-scale=1.0">
  <title>フレックスボックスの例</title>
  <リンク rel="スタイルシート" href="styles.css">
</head>

  <div>



<p>Flexbox の冒険を終えるにあたり、<em>CSS マジック — 疑似クラス</em>について少しお話しましょう。これらの便利なツールを使用すると、<strong>位置、状態、またはインタラクション</strong>に基づいて要素のスタイルを設定でき、Flexbox レイアウトをより動的でインタラクティブにすることができます。 :nth-child() を使用してスタイルを変更する場合でも、:hover を使用して微妙なアニメーションを作成する場合でも、:first-child を使用して 1 つのアイテムをポップさせる場合でも、疑似クラスを使用すると、余分な HTML を使用せずに独自のタッチを追加できます。</p>

<p>スキルをレベルアップし続ける準備はできていますか?確かにそうですよ！次回の投稿では、レイアウトに命を吹き込むための CSS テクニックをさらに深く掘り下げていきますので、しばらくお待ちください。私は学び、成長するためにここにいます。ヒント、フィードバック、修正がある場合は、遠慮なくコメントしてください。これからも一緒に構築していきましょう!</p>


          </div>

ログイン後にコピー

以上がFlexbox のマスタリング: レスポンシブレイアウトの構築に関する私の研究メモの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。