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

CSSフレックスアイテムのプロパティ徹底解説｜flex-basisの使い方と実例

CSS Flexboxレイアウトでは、コンテナだけでなく、その中に配置されるフレックスアイテム（子要素）側にもさまざまなプロパティを指定できます。これらを活用することで、各要素のサイズや並び順、配置を細かく制御できるようになります。

フレックスアイテムで使える主なプロパティ

フレックスアイテムに設定できるプロパティは以下の6つです。

  • order — アイテムの表示順序を変更する
  • flex-grow — 余ったスペースをどれだけ伸ばして分配するかを指定
  • flex-shrink — スペースが不足したときにどれだけ縮小するかを指定
  • flex-basis — アイテムの基本サイズ（長さ）を指定
  • flex — flex-grow / flex-shrink / flex-basis の一括指定（ショートハンド）
  • align-self — コンテナのalign-items設定を個別に上書きして交差軸方向の配置を指定

この記事では、中でもよく使われる「flex-basis」プロパティについて、具体的なコード例を交えて解説します。

flex-basisプロパティとは？

flex-basisは、フレックスアイテムの初期サイズ（幅または高さ）を設定するためのプロパティです。主軸の方向（横並びならwidth、縦並びならheight）に対応します。pxや%などの値に加え、auto（コンテンツに応じた自動サイズ）を指定することもできます。

下記のコードでは、9つのアイテムのうち4つ目（Q4）だけに flex-basis: 350px; を適用しています。他のアイテムは100px幅ですが、Q4だけ350pxに拡張されているのが確認できます。

flex-basisの実装例

<!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: 350px を指定した「Q4」だけが他より大きく表示され、flex-basisによって個別のサイズ制御が可能であることがわかります。

なお、widthとflex-basisが同時に指定された場合、基本的にはflex-basisが優先されます。柔軟なレイアウトを実現したい場合は、flexショートハンドを使って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