フレックスボックス生成

Flexboxプロパティを選んでCSSを生成。ライブプレビュー付き。

ツールを読み込み中...

関連ツール

フレックスボックス生成の主な使い方・用途

  • ✓レイアウト設計のCSS作成
  • ✓Flexboxの各プロパティ学習
  • ✓ナビゲーションバーのレイアウト
  • ✓グリッド代替のFlexboxレイアウト
  • ✓レスポンシブデザインの実装

使い方(ステップ別)

  1. 1
    プロパティを選ぶ— flex-direction・justify-content等をドロップダウンで設定します。
  2. 2
    プレビューを確認する— 設定した値がリアルタイムでプレビューに反映されます。
  3. 3
    CSSをコピーする— 生成されたCSSをコピーしてスタイルシートに使用します。

このツールの特徴

  • ●6つのFlexboxプロパティ設定
  • ●カラーボックスによるリアルタイムプレビュー
  • ●gap設定対応
  • ●完全なCSSの出力

このツールについて

Flexboxプロパティを選んでCSSを生成。ライブプレビュー付き。