Flexboxプレイグラウンド

CSS Flexboxのプロパティを実際に操作しながら動作を確認できるインタラクティブなツール。コンテナとアイテムの設定を変更して、Pure CSS・Tailwind CSS・SCSSのコードを自動生成します。

使い方

コンテナプロパティでFlexboxの基本設定を調整

アイテムを追加・削除してプレビューを確認

個別アイテムのプロパティを設定

生成されたCSS・Tailwind・SCSSコードをコピー

主な機能

リアルタイムプレビュー表示

全てのFlexboxプロパティに対応

Pure CSS、Tailwind CSS、SCSSコード生成

アイテムの動的追加・削除

レスポンシブ対応のプレビュー

選択中のアイテム

3 items

コンテナプロパティ

Layout Basics

Display

Flex Direction

Alignment

Justify Content

Align Items

Advanced

Flex Wrap

Align Content

Gap

アイテムプロパティ

Item 1

Flex Properties

Flex Grow

Flex Shrink

Flex Basis

Position

Align Self

Order

プレビュー

Live Preview

Item 1

Selected

Item 2

Item 3

Direction:
row

Justify:
flex-start

Align:
stretch

Wrap:
nowrap

生成されたコード

Pure CSS

/* Container Styles */
.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

/* Item Styles */
.flex-item-1 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-2 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

.flex-item-3 {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
  align-self: auto;
  order: 0;
}

よくある質問 (FAQ)

Flexboxは、CSS3で導入されたレイアウト手法の一つです。コンテナ内のアイテムを柔軟に配置・整列できる機能を提供し、レスポンシブデザインに適しています。

justify-contentは主軸（メイン軸）方向の配置を制御し、align-itemsは交差軸（クロス軸）方向の配置を制御します。flex-direction: rowの場合、justify-contentは水平方向、align-itemsは垂直方向になります。

flex-growは余白を埋める際の伸び率、flex-shrinkは空間不足時の縮み率、flex-basisは初期サイズを指定します。これらを組み合わせてflexプロパティとして記述することも可能です。

TailwindCSSでは、flex、flex-row、justify-center、items-centerなどのユーティリティクラスを使用してFlexboxレイアウトを実装できます。このツールで生成されたクラス名をそのまま使用できます。

Flexboxは画面サイズに応じてアイテムが自動的に配置され、flex-wrapやflex-directionを活用することで、デバイスに最適なレイアウトを実現できます。