コンテナ設定

アイテム (3)

プレビュー内のアイテムをクリックして個別設定

CSS出力

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 8px;

プレビュー

1
2
3

「Flexboxプレイグラウンド」とは

CSS Flexboxの各プロパティをリアルタイムで視覚的に確認できるインタラクティブツールです。flex-direction、justify-content、align-itemsなどのコンテナプロパティや、flex-grow、order などのアイテムプロパティをスライダーやドロップダウンで操作し、結果を即座にプレビューできます。

使い方

  1. 左側のコントロールでFlexコンテナのプロパティを変更します
  2. プレビュー内のアイテムをクリックすると、個別プロパティを設定できます
  3. 「追加」ボタンでアイテムを増やせます（最大12個）
  4. CSS出力セクションから生成されたコードをコピーできます

特徴

  • コンテナ・アイテム両方のFlexboxプロパティに対応
  • リアルタイムプレビューで変更を即座に確認
  • CSSコードをワンクリックでコピー
  • 登録不要でブラウザからすぐに利用可能

よくある質問

Q. Flexboxとは何ですか？

CSS Flexible Box Layout（Flexbox）は、コンテナ内のアイテムを効率的に配置・整列するためのCSSレイアウトモデルです。レスポンシブデザインに欠かせない技術です。

Q. 生成されたCSSはそのまま使えますか？

はい、コピーしたCSSをそのままスタイルシートに貼り付けてお使いいただけます。