ZeroPlus Media > Web制作 > HTML/CSS > 【CSS】flex-basisの使い方を解説！widthやheightとの違いは？

【CSS】flex-basisの使い方を解説！widthやheightとの違いは？

HTML/CSS

2022/05/16

2023/05/08

flex-basis は、flexアイテムの大きさを指定できるプロパティです。上手に使いこなせばCSSの記述を減らしつつコーディングの効率化を図れます。

この記事では flex-basis の使い方を解説します。flex-basis は特有の性質を持つため、この記事を参考に flex-basis の理解を深めましょう。

この記事で身につく内容

flex-basis とは
flex-basis の使い方
flex-basisと width・height の違い
flex-basis に関連するプロパティ

flex-basis は、flexboxプロパティの一つです。flexboxの学習では、一つのプロパティだけでなく全体的に理解することが大切です。しかし、flexboxプロパティは種類が多く、使い分けが難しいという難点もあります。

こちらの記事で、flexboxという概念や各プロパティの使い方について詳しく解説しています。学習に詰まったときやわからないプロパティがあるときなど、学習にお役立てください。

【CSS】Flexboxプロパティ一覧！それぞれの使い方を解説

プログラミング学習でこのような経験はありませんか？

目標に向けて何を学べば良いかわからない
調べても解決策が見つからない
現場レベルのスキルが身につくのか不安

これらの悩みは、学習環境を整えることで全て解決することができます。

ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。

なんでも相談できる専属メンター
いつでも技術相談ができるプロ講師
元IT企業CTO監修のカリキュラム

条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。

少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。

今すぐZeroPlus Gateの詳細を見る

flex-basisとは
- flex-basisに使用できる値
- flex-basisの性質
flex-basisの使い方
flex-basisとwidth・heightの違い
flex-basisに関連するプロパティ
まとめ

flex-basisとは

flex-basisは、flexアイテムの大きさを指定するプロパティです。

flex-basisに使用できる値

flex-basis に使用できる値は以下の通りです。

auto（初期値） - flexアイテムの大きさを自動的に決定する
数値 + 単位 - flexアイテムの大きさを、数値とpxやrem,emなどの単位で指定する
% - flexアイテムの大きさを%比率で指定する

flex-basisの性質

flex-basis には、以下のような性質があります。

width と併用したとき、flex-basis の値が優先される
flexアイテムが並ぶ方向によって横幅か高さの値となる
flex-grow / flex-shrink を使用するときの基準の値となる

width と併用時の flex-basis

flex-basis と width を併用したときは flex-basis の値が優先されることに注意しましょう。基本的に flex-basis と width に違いはないため、どちらかのプロパティを使用しましょう。

flex-direction と併用時の flex-basis

flex-basis は、flex-direction の値によって値の意味が変化する性質を持っています。

flex-basis の指定の変化

flex-direction:row/row-reverse; のとき - 横幅（width）
column/column-reverse のとき - 高さ（height）

flexbox には、「主軸」「クロス軸」という概念があります。主軸というのは、簡単に言えば flex-direction で指定している向きのことです。例えば、flexアイテムを横並びにしている場合は横方向が「主軸」、縦方向が「クロス軸」となります。

flexboxのレイアウト作成ではこの主軸とクロス軸の理解が重要になるので、ぜひ学習してみてください。

flex-direction の使い方、主軸とクロス軸については以下の記事が参考になります。併せてお読みください。

【CSS】flex-directionで要素を縦並び・横並びにする方法を解説

flex-grow/flex-shrink と併用時の flex-basis

flex-basis で指定した値は flex-grow や flex-shrink を使用する場合の基準値となります。

flex-grow、flex-shrink の使い方については以下の記事が参考になりますので併せてお読みください。

【CSS】flex-growの使い方！flexアイテムの大きさを倍率で指定する方法を解説

【CSS】flex-shrinkでflexアイテムを縮小させる方法を解説

flex-basisの使い方

flex-basis はflexアイテムに有効なプロパティです。そのため親要素に display: flex; を、子要素に flex-basis をそれぞれ指定します。

以下がHTMLとCSSの基本形です。

 <div class="flexbox">
   <div class="flex-item item01">①</div>
   <div class="flex-item item02">②</div>
   <div class="flex-item item03">③</div>
 </div>

.flexbox {
 display: flex;
}

.flex-item{
 flex-basis: 値;
}

flex-basisに「auto（初期値）」を指定する

flex-basis: auto; のとき、flexアイテムの大きさは自動的に決定されます。

以下が記述例と出力結果です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox{
  display: flex;
  text-align: center;
}

.flex-item{
  color: #fff;
  width: 100%;
}

.item01{
  background-color: red;
  flex-basis:auto;
}

.item02{
  background-color: blue;
  flex-basis: auto;
}

.item03{
  background-color: green;
  flex-basis: auto;
}

flexアイテムの大きさが自動的に決まり、均等な横幅になりました。

今回の例ではflexアイテム全体のwidthを100%としたためこのような表示となっています。flexアイテム全体のwidthを指定せずにflex-basisのみを指定した場合は、各要素の最小の大きさで表示されることを理解しておきましょう。

flex-basisに「数値 + 単位」を指定する

flex-basis に数値と単位を指定することで、flexアイテムを任意の大きさに変更できます。

ここでは例としてpxを使用します。

以下が記述例と出力結果です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox{
  display: flex;
  text-align: center;
}

.item01{
  background-color: red;
  flex-basis: 300px;
}

.item02{
  background-color: blue;
  flex-basis: 500px;
}

.item03{
  background-color: green;
  flex-basis: 600px;
}

flex-basisに「％」を指定する

flex-basis は%比率で指定することもできます。

以下が記述例と出力結果です。

<div class="flexbox">
  <div class="flex-item item01">①</div>
  <div class="flex-item item02">②</div>
  <div class="flex-item item03">③</div>
</div>

.flexbox{
  display: flex;
  text-align: center;
}

.item01{
  background-color: red;
  flex-basis: 45%;
}

.item02{
  background-color: blue;
  flex-basis: 30%;
}

.item03{
  background-color: green;
  flex-basis: 25%;
}