フレックスボックスジェネレーター

フレックス方向、ラップ、位置揃え、整列を試してください。アイテムのレイアウトがライブで更新されるのを確認し、コンテナーの CSS をコピーします。

Flexbox Generator

Live

flex-directionflex-wrapjustify-contentalign-items

Gap12px

Items5

CSS output

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
gap: 12px;

Key capabilities

フレックス方向、ラップ、位置揃え、整列を試してください。レイアウトがライブで更新されるのを確認してください。
ブラウザで実行
無料で使用できます

使い方

フレックス方向とラップを設定します。
justify-content と align-items を調整します。
フレックスボックス CSS をコピーします。

How this tool works

フレックス方向とラップを設定します。
justify-content と align-items を調整します。
フレックスボックス CSS をコピーします。

Recommended settings

最初はデフォルトのオプションを使用し、必要に応じて調整します

Supported formats

Text / on-page input

File size and limits

非常に複雑なマルチレイヤーのプレビューは、古い携帯電話では遅く感じる場合があります。

Privacy

カラーおよび CSS ジェネレーターは完全にブラウザー内で実行されます。プレビューと変換ではスタイルがアップロードされることはありません。

Common use cases

必要なときにいつでも Flexbox Generator を使用します。フレックス方向、ラップ、位置揃え、整列を試してください。レイアウトがライブで更新されるのを確認してください。

Troubleshooting

貼り付け後のプレビューの見た目が変わる

ページ上に競合する CSS がないか確認します (リセット、継承された色)。まず、生成されたルールを分離されたスタイルシートにコピーします。

よくある質問

これで CSS がアップロードされますか?

いいえ。ジェネレーターとコンバーターは、ライブプレビューを使用してブラウザーで実行されます。

アカウントは必要ですか?

いいえ。ツールを開いてコントロールを調整し、CSS をコピーします。