メインコンテンツまでスキップ

フレックスアイテムのサイズ

フレックスアイテムのサイズは、flex-grow、flex-shrink、flex-basis の3つのプロパティによって決定されます。 これらのプロパティを理解することで、レスポンシブなレイアウトを柔軟に作成できるようになります。

flex-basis​

flex-basis は、フレックスアイテムの初期サイズ（ベースサイズ）を指定するプロパティです。 このプロパティは、flex-growやflex-shrinkが適用される前の、アイテムの理想的なサイズを定義します。

CSS
.flex-item {
  flex-basis: 200px; /* 初期サイズを200pxに設定 */
}

flex-basis の値​

  • auto（デフォルト）: アイテムのコンテンツサイズに基づく
  • <length>（px, em, remなど）: 具体的な長さを指定
  • <percentage>（%）: コンテナのサイズに対する割合
  • content: コンテンツのサイズに基づく（IE非対応）

flex-basis の例​

auto（デフォルト）​

コンテンツのサイズに基づいてサイズが決まります。

短いテキスト
これは長いテキストコンテンツです
中程度

固定サイズ​

具体的なサイズを指定した場合：

100px
200px
150px

flex-grow​

flex-grow は、フレックスコンテナに余剰スペースがある場合に、アイテムがどれくらい拡大するかを指定するプロパティです。 値が大きいほど、より多くの余剰スペースを占有します。

CSS
.flex-item {
  flex-grow: 1; /* 他のアイテムと同じ比率で拡大 */
}

flex-grow の値​

  • 0（デフォルト）: 拡大しない
  • <number>（正の数）: 拡大の比率を指定

flex-grow の例​

すべて同じ値​

すべてのアイテムに flex-grow: 1 を設定すると、等しく拡大します。

flex-grow: 1
flex-grow: 1
flex-grow: 1

異なる値​

異なる flex-grow 値を設定すると、比率に応じて拡大します。

flex-grow: 1
flex-grow: 2
flex-grow: 1

拡大しない要素​

flex-grow: 0 のアイテムは拡大せず、他のアイテムが余剰スペースを占有します。

flex-grow: 0
flex-grow: 1
flex-grow: 1

flex-shrink​

flex-shrink は、フレックスコンテナのスペースが不足している場合に、アイテムがどれくらい縮小するかを指定するプロパティです。 値が大きいほど、より多く縮小されます。

CSS
.flex-item {
  flex-shrink: 1; /* 他のアイテムと同じ比率で縮小 */
}

flex-shrink の値​

  • 1（デフォルト）: 縮小可能
  • 0: 縮小しない
  • <number>（正の数）: 縮小の比率を指定

flex-shrink の例​

縮小可能（デフォルト）​

コンテナが狭い場合、アイテムは縮小されます。

flex-shrink: 1
flex-shrink: 1
flex-shrink: 1

縮小しない要素​

flex-shrink: 0 のアイテムは縮小せず、固定サイズを保ちます。

flex-shrink: 0
flex-shrink: 1
flex-shrink: 1

異なる縮小率​

異なる flex-shrink 値を設定すると、比率に応じて縮小します。

flex-shrink: 1
flex-shrink: 3
flex-shrink: 1

flex ショートハンド​

flex プロパティは、flex-grow、flex-shrink、flex-basis をまとめて指定できるショートハンドプロパティです。

CSS
.flex-item {
  flex: 1 1 200px; /* flex-grow: 1, flex-shrink: 1, flex-basis: 200px */
}

よく使用される flex の値​

flex: 1​

flex: 1 は flex: 1 1 0% の省略形で、等しく拡大・縮小するアイテムを作成します。

flex: 1
flex: 1
flex: 1

flex: auto​

flex: auto は flex: 1 1 auto の省略形で、コンテンツサイズを基準に拡大・縮小します。

短い
これは長いコンテンツです
中程度

flex: none​

flex: none は flex: 0 0 auto の省略形で、拡大も縮小もしません。

flex: none
flex: 1
flex: 1

実用例​

カードレイアウト​

異なるサイズのカードを含むレスポンシブなレイアウト：

CSS
.card-container {
  display: flex;
  gap: 20px;
}

.card {
  flex: 1;
  min-width: 200px;
}

.card.featured {
  flex: 2; /* プレミアムプランは2倍の幅 */
}

基本プラン

月額 ¥1,000

プレミアムプラン

月額 ¥2,000（推奨）

エンタープライズ

要お問い合わせ

サイドバーレイアウト​

固定幅のサイドバーと可変幅のメインコンテンツ：

CSS
.layout-container {
  display: flex;
}

.sidebar {
  flex: 0 0 200px; /* 固定幅200px、拡大・縮小しない */
}

.main-content {
  flex: 1; /* 残りのスペースを占有 */
}

サイドバー
（固定幅: 200px）

メインコンテンツ
（可変幅: 残りのスペースを占有）

これらのプロパティを組み合わせることで、様々なレイアウトパターンを実現できます。 特に、レスポンシブデザインにおいて、画面サイズに応じて柔軟に調整されるレイアウトの作成に威力を発揮します。