the IT Hustle
ツール実践マニュアル概要

会社情報

  • 概要
  • 実践マニュアル
  • AI用語集
  • 筆者について
  • お問い合わせ

プロダクト

  • ツール
  • 料金ウォッチ
  • エージェントオプス
  • コード
  • デザイン
  • システム管理
  • 生産性
  • マーケティング
  • ビジネス

法的情報

  • プライバシーポリシー
  • 利用規約
  • 免責事項
  • 編集方針
  • 訂正について

© 2026 Salty Rantz LLC. 無断複製・転載を禁じます。

テクノロジーの変革を乗り越える人々のために。

Flexbox プレイグラウンド

インタラクティブな Flexbox レイアウトテスター。コンテナとアイテムのコントロール・ライブプレビュー・レイアウトプリセット・CSS 出力付き。

Flexboxプレイグラウンド

Experiment with CSS Flexbox. Adjust container and item properties, see live results, and copy the generated CSS.

プリセット:
Container
flex-direction
flex-wrap
justify-content
align-items
align-content
gap: 12px
Items (3)
1
2
3
ライブプレビュー
1
2
3
生成されたCSS
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}

Flexboxプレイグラウンドの使い方

CSS Flexboxをインタラクティブに試してみましょう。

  1. 1
    コンテナdirection、justify、align、wrap、gapを設定します。
  2. 2
    アイテムアイテムを追加し、flex-grow/shrink/basisを設定します。
  3. 3
    CSSをコピーするコンテナとアイテムの生成されたCSSをコピーします。

よくある質問

Flexboxは1次元レイアウト(行または列)向けです。Gridは2次元向けです。flex-wrapを使う場合はGridを検討してください。

grow:1、shrink:1、basis:0%の省略形です。アイテムがスペースを均等に埋めるように拡大します。

関連ツール

CSSグラデーションジェネレーターCSS 単位コンバーター