Flexboxビジュアライザー
プロパティを変えてレイアウトの変化をリアルタイムで確認しよう
flex-direction
justify-content
align-items
flex-wrap
gap
8px
1
2
3
4
5
アイテム数:アイテム数: 5
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}使い方
- 左（スマホは下）のコントロールパネルで プロパティの値をクリック して選ぼう。
- 右（スマホは上）の プレビューエリア にアイテムのレイアウト変化がすぐ反映されるよ。
- 気に入ったレイアウトができたら 「📋 CSSをコピー」 ボタンでコードをコピーして自分のプロジェクトに貼り付けよう！
このツールでできること
Flexboxのプロパティ（justify-content、align-items、flex-direction、flex-wrap、gap）をボタンで切り替えて、レイアウトの変化をリアルタイムで確認できるツールだよ。「このプロパティを変えるとどうなるの？」が一瞬でわかる。CSSを書き換えてリロードする手間がないから、Flexboxの仕組みを直感的に理解できるよ。
Flexboxプロパティ解説
- justify-content
- 横方向（主軸）のアイテム配置を決める。centerで中央寄せ、space-betweenで均等配置。ナビゲーションメニューやカードの横並びでよく使うよ。
- align-items
- 縦方向（交差軸）のアイテム配置を決める。centerで上下中央揃え。高さが違うアイテムを揃えたい時に便利。
- flex-direction
- アイテムの並ぶ方向を決める。rowで横並び、columnで縦並び。スマホ表示で縦に切り替える時に使うよ。
- flex-wrap
- アイテムが入りきらない時に折り返すかどうか。wrapにすると自動で次の行に折り返してくれる。
- gap
- アイテム同士の間隔。marginを個別に指定するより簡単で、均等なスペースが作れるよ。
よくある質問
- Q. Flexboxとは何ですか？
- A. CSSのレイアウト方法の1つで、要素を横並びや縦並びに配置するための仕組みだよ。display: flexを親要素に指定するだけで使える。従来のfloatより直感的にレイアウトが組めるのが特徴。
- Q. justify-contentとalign-itemsの違いは？
- A. justify-contentは主軸（デフォルトでは横方向）の配置、align-itemsは交差軸（デフォルトでは縦方向）の配置を決めるよ。flex-directionをcolumnにすると軸が入れ替わるから注意。
- Q. Flexboxで中央揃えするには？
- A. 親要素にdisplay: flex; justify-content: center; align-items: center;を指定するだけ。これで子要素が上下左右の中央に配置されるよ。
- Q. FlexboxとCSS Gridの違いは？
- A. Flexboxは1方向（横or縦）のレイアウトが得意。Gridは2方向（横と縦の両方）を同時に制御できる。ナビやカード横並びはFlex、ページ全体のレイアウトはGridが向いてるよ。
こんな時に使おう
- ナビゲーションメニュー: justify-content: space-betweenでロゴとメニューを左右に配置
- カードの横並び: flex-wrap: wrapとgapで、画面幅に応じて自動折り返し
- 上下中央揃え: align-items: centerでボタンやアイコンを行の中央に配置
このツールと一緒に学ぼう
Flexboxをもっと深く知りたい
「中央寄せ」だけじゃない Flexbox の実力
Flexbox といえば「中央寄せが簡単にできる」が有名だけど、それだけじゃない。 ナビバーの均等配置、カードの高さ揃え、フッターを画面下部に固定 — これらも Flexbox の得意技。
でも justify-content と align-items の違い、flex-grow と flex-shrink の挙動は、文章で読んでも分かりにくい。
このビジュアライザーでプロパティを切り替えれば、「この値にするとこう動く」が目で見える。
授業や制作で Flexbox を使う場面
- ナビゲーションバー — ロゴを左、メニューを右に配置。
justify-content: space-betweenの1行で実現。 - カードの高さ揃え — 中身の量が違うカードでも、Flexbox なら高さが自動で揃う。学園祭サイトのイベント一覧に。
- フッターを画面下部に固定 — コンテンツが少ないページでもフッターが浮かない。
flex-grow: 1をメインに指定するだけ。 - レスポンシブ対応 —
flex-wrap: wrapで画面幅が狭くなったら自動で折り返し。メディアクエリなしでもある程度対応できる。
よくある質問
- Q. justify-content と align-items の違いが分からない
- justify-content は主軸（デフォルトは横方向）の配置。align-items は交差軸（デフォルトは縦方向）の配置。このツールで両方を切り替えて、どっちが横でどっちが縦か体感しよう。
- Q. flex: 1 って何の省略形？
flex-grow: 1; flex-shrink: 1; flex-basis: 0%の省略形。「余ったスペースを均等に分配して」という意味。子要素全部にflex: 1をつけると等幅になる。