【ふれっくすぼっくす】
Flexbox とは？
最終更新:
💡 要素を「柔軟に」並べるCSS
CSSの1次元レイアウトの仕組み。主軸に沿って要素を並べ、余白の配分、サイズの伸縮、交差軸での位置揃えなどを指定できる。
📌 このページのポイント
ひよこ なぜFlexboxが便利なの？
ペンギン先生 並べる向きや余白の配分、位置揃えを指定できるよ。たとえば高さのあるコンテナで、子要素に自動マージンなどがない例なら、display: flex; justify-content: center; align-items: centerで両軸の中央に置ける。どんな条件でも3行で解決するという意味ではないんだ。
ひよこ 主軸と交差軸って？
ペンギン先生 主軸は要素を並べる軸、交差軸はそれに直交する軸だよ。通常の横書きならrowは横が主軸、columnは縦が主軸になる。方向は書字方向にも関係するので、rowが常に物理的な横方向とは限らないんだ。
ひよこ flex: 1って何？
ペンギン先生 伸びる割合を1にする省略形だよ。仕様上はflex: 1 1 0に相当し、ブラウザでは通常flex: 1 1 0%として展開される。この0と0%は条件によって違いが出る。同じ指定でも内容の最小サイズなどが関係するので、常に同じ幅になる保証ではないんだ。
ひよこ flex-wrapって何？
ペンギン先生 初期値nowrapは折り返さず、収まらない場合は縮むことも、最小サイズなどであふれることもあるよ。wrapなら複数行にできるけれど、各行の配置は独立している。行をまたいで列をそろえるような2次元の配置は、Gridなどと使い分けるんだ。
まとめ：ざっくりこれだけ覚えればOK！
「Flexbox」って出てきたら「要素を主軸に沿って柔軟に並べるCSSの仕組み」と思えばだいたいOK！
📖 おまけ：英語の意味
「Flexible Box Layout」 ＝ 柔軟なボックスレイアウト
💬 Flexibleは「柔軟な」、Boxは「箱」。並べる向きや余白、要素の伸縮などを調整できるんだよ