CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのflex-wrapプロパティとは？フレックスアイテムの折り返し設定を解説

CSSのflex-wrapプロパティとは

flex-wrapプロパティは、フレックスコンテナ内のフレックスアイテムを折り返すかどうかを指定するためのCSSプロパティです。デフォルトでは、フレックスアイテムは1行に並べようとするため、コンテナの幅が足りない場合でも折り返されません。flex-wrapを使うことで、複数行への折り返しを簡単に実現できます。

flex-wrapプロパティの主な値

  • nowrap（初期値）：アイテムを1行に並べ、折り返しません。
  • wrap：コンテナの幅が足りなくなると、アイテムが次の行へ折り返されます。
  • wrap-reverse：wrapと同様に折り返しますが、行の並び順が逆になります。

flex-wrapの実装例

以下のコードでは、flex-wrap: wrap; を指定することで、フレックスアイテムが折り返される様子を確認できます。コンテナの幅が狭くなると、アイテム（Q1〜Q9）が自動的に次の行へ移動します。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <style>
      .mycontainer {
        display: flex;
        background-color: orange;
        flex-wrap: wrap;
      }
      .mycontainer > div {
        background-color: white;
        text-align: center;
        line-height: 40px;
        font-size: 25px;
        width: 100px;
        margin: 5px;
      }
    </style>
  </head>
  <body>
    <h1>Quiz</h1>
    <div class = "mycontainer">
      <div>Q1</div>
      <div>Q2</div>
      <div>Q3</div>
      <div>Q4</div>
      <div>Q5</div>
      <div>Q6</div>
      <div>Q7</div>
      <div>Q8</div>
      <div>Q9</div>
    </div>
  </body>
</html>

まとめ

flex-wrapプロパティを使えば、レスポンシブデザインにおいて画面幅に応じてフレックスアイテムを柔軟に折り返すことができます。nowrap・wrap・wrap-reverseの3つの値を状況に応じて使い分けることで、より使いやすいレイアウトを実現しましょう。

  1. CSS子セレクター（>）とは？使い方とサンプルコードで解説

    CSSの子セレクターは、特定の親要素の直下にある子要素だけを選択するために使用されるセレクターです。親要素と子要素の間に「>」（大なり記号）を挟んで指定することで、直接の子要素のみがスタイルの適用対象となり、孫要素以降の階層には影響しません。構文CSS子セレクターの基本構文は以下の通りです。element > element { /* 宣言 */ }使用例1次の例では、article要素の直下にあるdiv要素、およびdiv要素の直下にあるp要素に対してスタイルを適用しています。<!DOCTYPE html> <html> <head> <s

  2. CSSのbackground-attachmentプロパティとは？背景画像のスクロール挙動を制御する方法

    CSSのbackground-attachmentプロパティは、ページをスクロールした際に、背景画像がビューポート（ブラウザの表示領域）に対してどのように振る舞うかを指定するためのプロパティです。 このプロパティには、主に以下の3つの値を指定できます。 scroll：初期値。背景画像は要素に対して固定され、ページ全体のスクロールに合わせて移動します。 fixed：背景画像がビューポートに対して固定され、ページをスクロールしても背景は一切動きません。 local：背景画像が要素のコンテンツと共にスクロールします。要素自体にスクロール領域がある場合に特に有効です。 構文 CSSのbackgro