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

CSSのflexプロパティとは？使い方とサンプルコードを解説

CSSのflexプロパティは、flex-grow・flex-shrink・flex-basisという3つの個別プロパティを、たった1つの一括指定（ショートハンド）プロパティでまとめて設定できる便利な機能です。フレックスボックスレイアウトにおいて、アイテムがどれだけ伸びるか・縮むか・初期サイズはいくらかを1行で制御できるため、実務でも非常によく使われています。

flexプロパティの基本構文

flex: flex-grow flex-shrink flex-basis;
  • flex-grow：コンテナに余ったスペースがある場合に、各アイテムがどれだけ伸びるかの比率（初期値：0）
  • flex-shrink：スペースが足りない場合に、各アイテムがどれだけ縮むかの比率（初期値：1）
  • flex-basis：アイテムの初期サイズ。widthと同じような値を指定可能（初期値：auto）

使用例

次の例では、9つのアイテムを持つフレックスコンテナの中で、4番目の「Q4」に flex: 20 0 350px を指定しています。これにより、Q4は他のアイテムの20倍の比率で伸び、縮小はせず、初期幅350pxで表示されます。

<!DOCTYPE html>
<html>
   <head>
      <style>
         .mycontainer {
            display: flex;
            background-color: orange;
         }
         .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 style = "flex: 20 0 350px">Q4</div>
         <div>Q5</div>
         <div>Q6</div>
         <div>Q7</div>
         <div>Q8</div>
         <div>Q9</div>
      </div>
    </body>
</html>

覚えておきたい代表的な指定方法

  • flex: 1 … 1 1 0% と同等。すべてのアイテムを均等に伸縮させたいときに便利
  • flex: auto … 1 1 auto と同等。コンテンツのサイズを基準に伸縮
  • flex: none … 0 0 auto と同等。伸縮せず固定サイズで表示
  • flex: initial … 0 1 auto と同等。ブラウザのデフォルト動作

flexプロパティを使いこなせるようになると、複雑なレスポンシブレイアウトもシンプルな記述で実現できます。ぜひ実際のコードで試してみてください。

  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