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

flex-flowとは?flex-directionとflex-wrapをまとめて指定できるCSS短縮プロパティ

```html

flex-flowプロパティとは?

CSSのflex-flowは、フレックスボックスレイアウトで使用できる短縮形(ショートハンド)プロパティです。主軸の方向を決めるflex-directionと、アイテムの折り返し方法を決めるflex-wrapの2つの値を、1つの宣言だけでまとめて指定できます。

基本構文

flex-flow: <flex-direction> <flex-wrap>;

例えば「flex-flow: column wrap;」と指定すれば、アイテムは縦方向(column)に並び、コンテナからあふれる分は新しい列へ折り返されます(wrap)。それぞれの値は省略可能で、省略した場合には初期値(row / nowrap)が適用されます。

実装サンプル

次のコードは、flex-flowプロパティに「column wrap」を指定した例です。HTMLファイルとして保存し、ブラウザで開いて実際の動作を確認してみてください。

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: orange;
      flex-flow: column 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>

コードのポイント

  • display: flex; … コンテナをフレックスボックスとして初期化します。
  • flex-flow: column wrap; … アイテムを上から下へ縦に並べ、高さが足りなくなると右側の列へ折り返します。
  • background-color: orange; … コンテナの背景をオレンジ色にすることで、折り返しの様子がひと目でわかります。
  • 子要素のdivには白背景・幅100px・外余白5pxなどを指定し、テキストは中央揃えで表示されます。

ブラウザで表示すると、オレンジ色のコンテナの中に「Q1〜Q9」のアイテムが縦一列に並び、スペースが足りないアイテムは自動的に隣の列へ折り返されて表示されます。flex-directionとflex-wrapを別々に記述する必要がないため、スタイルシートがすっきりし、コード全体の可読性も向上します。

  1. CSSでflex-shrinkプロパティをアニメーション化する方法

    CSSのflex-shrinkプロパティは、フレックスコンテナ内のアイテムが縮小する比率を指定できるプロパティです。このプロパティにCSSアニメーションを組み合わせることで、要素の縮み方を滑らかに変化させることができます。 flex-shrinkプロパティとは flex-shrinkは、フレックスボックスレイアウトにおいて、コンテナのスペースが不足したときに各アイテムをどれだけ縮小させるかを決める値です。デフォルト値は「1」で、数値が大きいほど強く縮小されます。「0」を指定すると、そのアイテムはまったく縮小しなくなります。 実装例 以下のコードでは、@keyframesを使ってflex-shr

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

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