Flexboxプレイグラウンド
flex-direction
justify-content
align-items
flex-wrap
gap: 8px
アイテム数: 4
プレビュー
1
2
3
4
CSS
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;
}関連する外部サイト
一部のリンクはアフィリエイトリンクを含みます。
関連ツール
CSS clamp() ジェネレーター最小/最大サイズとビューポート範囲から、レスポンシブな文字/余白用の流体 CSS clamp() を生成しプレビュー。ブラウザ完結・送信なし。JSON整形ツール貼り付けるだけで JSON を読みやすく整形、または1行に圧縮できます。壊れた JSON は何行目・何列目がおかしいかをハイライト表示。Base64 変換テキストと Base64 を相互変換。日本語・絵文字も文字化けしない（UTF-8 対応）、URL セーフ Base64、画像を data URL に変換。ブラウザ完結・送信なし。正規表現テスター正規表現をその場でテスト。マッチのハイライト・キャプチャグループ・フラグ・置換プレビューに対応。ブラウザ完結・送信なし。
CSS Flexboxを視覚的に試せるプレイグラウンドです。flex-direction・justify-content・align-items・flex-wrap・gapをトグルするとライブプレビューが即座に更新され、生成されたCSSをコピーできます。Flexのプロパティの動きを理解したり、レイアウトを素早く調整するのに最適です。すべてブラウザ内で動作します。
使い方
- ボタンでFlexプロパティを切り替えます。
- プレビューのボックスがリアルタイムで並び替わるのを確認します。
- アイテム数を調整してからCSSをプロジェクトにコピーします。
主軸と交差軸
Flexコンテナはflex-directionで設定された主軸（行または列）にアイテムを並べます。justify-contentは主軸に沿ったアイテムの位置を、align-itemsは交差軸（主軸に垂直な方向）の位置を決めます。flex-wrapはアイテムが次の行に折り返すかどうかを、gapはアイテム間の一定な間隔を設定します。
機能
主要プロパティすべてに対応
direction・justify-content・align-items・wrap・gapを操作できます。
ライブプレビュー
プロパティを変更するたびにアイテムが即座に並び替わります。
アイテム数の調整
ボックスの数を変えてレイアウトの変化を確認できます。
CSSのコピー
コンテナにそのまま使えるCSSルールを取得できます。
活用シーン
プロトタイピング
コーディングの前にレイアウトに合ったFlexの設定を素早く見つけます。
Flexboxの学習
justifyとalignがどのように連動するか直感的に理解できます。
位置合わせの調整
アイテムを正しく中央揃えや均等配置にする組み合わせをテストします。
教育・説明
Flexboxの動きを学生やチームメンバーにリアルタイムで見せられます。
注意事項
- 主軸はflex-direction（rowまたはcolumn）に従います。
- justify-contentは主軸に、align-itemsは交差軸に作用します。
- 折り返しはアイテムがコンテナ幅を超えた場合にのみ意味を持ちます。
- すべてデバイス上で動作します。アップロードはありません。
よくある質問
- justify-contentとalign-itemsの違いは何ですか？
- justify-contentは主軸（flex-directionで設定した方向）に沿ったアイテムの配置を、align-itemsは交差軸（主軸に垂直な方向）の配置を決めます。
- 主軸とは何ですか？
- アイテムが流れる主要な方向です。flex-direction: rowなら水平、columnなら垂直になります。
- flex-wrapはいつ意味を持ちますか？
- アイテムの合計幅（または高さ）がコンテナを超えたときに意味を持ちます。wrapを有効にすると、はみ出したアイテムが縮小やオーバーフローせずに次の行に移動します。
- gapは何をしますか？
- gapはマージンを使わずにFlexアイテム間に均等な間隔を追加し、レイアウトをすっきり保ちます。
- サーバーに何か送信されますか？
- いいえ。プレイグラウンドはすべてブラウザ内で動作し、アップロードは行われません。