flex-basis

フレックスベイシス（フレックスボックス）

意味フレックスアイテムの初期サイズ

flex-basisとは？

flex-basisプロパティは、フレックスアイテムの初期サイズを設定するために使用します。これは、フレックスコンテナ内でアイテムがどのように伸縮するかを決定する前に、その基準となるサイズを指定するものです。単位はpx、em、%などが使え、'auto' や '0' のようなキーワードも使用可能です。

flex-basisの具体的な使い方

フレックスアイテムの初期サイズを固定値で指定する例

<style>
    .item {
        flex-basis: 200px;
    }
</style>

<div class='item'>
    このアイテムの初期サイズは200ピクセルです。
</div>

クラス名'item'が指定されたフレックスアイテムの初期サイズを200ピクセルに設定しています。

フレックスアイテムの初期サイズを自動設定する例

<style>
  .item {
    flex-basis: auto;
  }
</style>

<div class='item'>
  このアイテムの初期サイズは自動的に決定されます。
</div>

flex-basisをautoに設定すると、アイテムの内容に基づいて初期サイズが決定されます。

flex-basisに関するよくある質問

Q. flex-basisとwidthの違いは？

A. flex-basisはフレックスアイテムの初期サイズを設定し、フレックス計算の基準となります。一方、widthは要素の幅を直接指定します。フレックスボックスでは、flex-basisがwidthより優先されます。

Q. flex-basis: autoとは？

A. flex-basis: autoは、アイテムの内容に基づいて初期サイズを自動的に決定します。これはフレックスアイテムのデフォルト値です。

Q. flex-basisに使える単位は？

A. flex-basisには、px、em、%などの長さ単位や、auto、content、0などのキーワードを使用できます。また、calc()関数を使用して計算した値も指定できます。

flex-basisが学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、CSSのflex-basisやalign-items、justify-content、align-content、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。