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

CSSのflex-basisプロパティとは？フレックスアイテムの初期サイズ指定方法を解説

CSSのflex-basisプロパティは、Flexboxレイアウトにおけるフレックスアイテム（子要素）の基本となる長さ（主軸方向の初期サイズ）を設定するためのプロパティです。flex-growやflex-shrinkが伸縮の挙動を制御するのに対し、flex-basisはアイテムが伸縮する前の基準サイズを決めます。

flex-basisで使える主な値

  • auto（初期値）：要素自身のwidthまたはheightの値に依存します。
  • length：px、em、remなどの単位で固定値を指定します。
  • percentage：親コンテナの幅に対する割合（%）で指定します。
  • content：コンテンツの内容に応じた自動サイズになります。

以下のコードでは、9つのフレックスアイテムの中で「Q4」だけにflex-basis: 350pxを適用しています。他のアイテムは幅100pxですが、Q4のみ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-basis: 350px">Q4</div>
      <div>Q5</div>
      <div>Q6</div>
      <div>Q7</div>
      <div>Q8</div>
      <div>Q9</div>
    </div>
  </body>
</html>

flex-basisを使う際のポイント

flex-basisは単体でも使用できますが、実際の開発ではflex: 1 1 autoのようなショートハンドプロパティ（flex-grow・flex-shrink・flex-basisをまとめて指定）で使われることが多いです。また、flex-directionがrowの場合は幅（width）が、columnの場合は高さ（height）が基準になる点にも注意しましょう。

  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