flex-basis 伸び縮みの前の基準幅 | Web Creator 【Yasuhiro Ito】

意味

伸び縮みを計算する前の、その子の主軸方向の寸法を決める場合に使います。初期値は auto で、width や中身の大きさに従います。0 や 40% のように書くと、分配の起点が揃いやすいです。

まとめて書く場合は flex です。width と両方書くと、主軸が横のときは flex-basis が優先されます。

HTMLとCSSをコピーして、自分のファイルへ貼り付ければ同じ見た目を確認できます。

HTML

<div class="row">
  <span>基準</span>
  <span>同じ起点</span>
</div>

CSS

.row {
  display: flex;
  gap: 0.4rem;
}
.row > span {
  flex-basis: 4.5rem;
  background: #efeef8;
  padding: 0.4rem 0.5rem;
}

プレビュー

一緒に使う指定です。一覧から行き来できます。

出典: MDN Web Docs（`@mdn/browser-compat-data`）