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

CSSのflexプロパティとは？flex-grow・flex-shrink・flex-basisを1行でまとめる省略形

flexプロパティとは

CSSのflexプロパティは、フレックスボックスレイアウトで使われるflex-grow（伸びる比率）、flex-shrink（縮む比率）、flex-basis（基本サイズ）という3つのプロパティを、1行でまとめて指定できる省略形（ショートハンド）です。個別に3行書く必要がなく、コードを簡潔に保てるため実務でも頻繁に利用されます。

各値の意味

  • 第1値（flex-grow）：コンテナに余白がある場合、他のアイテムに対してどの程度伸びるかの比率
  • 第2値（flex-shrink）：コンテナの空きスペースが不足している場合、どの程度縮小するかの比率
  • 第3値（flex-basis）：アイテムの初期サイズ。widthやheightの代わりに使われる基準となる寸法

例えば flex: 20 0 350px; と記述すると、それぞれ「flex-grow: 20」「flex-shrink: 0」「flex-basis: 350px」を指定したことになります。この設定では、そのアイテムは他のアイテムの20倍のペースで伸び、まったく縮まず、基本幅は350pxとなります。

実装例

次のコードを実行すると、flexプロパティの効果を確認できます。4番目のアイテム（Q4）にのみ flex: 20 0 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>

ブラウザで表示すると、Q4のボックスだけ横幅が大きく広がり、残りのアイテムとの差が一目でわかります。このように、flexプロパティを使えばフレックスアイテムの伸縮挙動を直感的かつ効率的に制御できます。

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

    flex-basisプロパティをアニメーションさせる CSSでflex-basisプロパティをアニメーション化するには、@keyframesルールを使ってアニメーションを定義し、要素に適用します。flex-basisはフレックスアイテムの主軸方向の初期サイズを指定するプロパティで、この値を変化させることで、アイテムが伸び縮みするような滑らかなアニメーションを実現できます。 以下は、flex-basisプロパティにアニメーションを適用するサンプルコードです。実際にブラウザで実行して、動作を確認してみてください。 サンプルコード <!DOCTYPE html> <html>

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

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