Color & CSS Tools

Flexbox Generator

Flexboxプロパティをプレビューしながら生成。

flex-direction

justify-content

align-items

1

2

3

結果

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;

使い方

各プロパティを選択
CSSをコピー

Flexbox Generatorについて

flex-direction、justify-content、align-itemsを変更しながら、リアルタイムでレイアウトをプレビューし、CSSを生成する無料ツールです。

よくある質問

gapも生成できますか？

今後対応予定です。

関連ツール

Color Picker

カラーピッカーで色を選び、HEX/RGB/HSL値を取得します。

使ってみる

RGB to HEX

RGB値をHEX(16進数)カラーコードに変換します。

使ってみる

HEX to RGB

HEXカラーコードをRGB値に変換します。

使ってみる

Gradient Generator

2色と角度からCSSグラデーションを生成します。

使ってみる

おすすめツール

JSON Formatter

JSONを読みやすく整形します。インデント、改行を自動付与。

使ってみる

Regex Tester

正規表現とテキストのマッチをリアルタイムで確認できます。

使ってみる

QR Code Generator

URLやテキストからQRコードを生成します。

使ってみる

← Color & CSS Toolsの一覧に戻る