CSS Flexboxジェネレーター
flex-direction、flex-wrap、justify-content、align-items、align-content、およびgapコントロールからCSSフレックスボックスコンテナルールを構築します — 生成されたすぐに使える.container {}ブロックをスタイルシートにコピーします。
入力
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-flexbox-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"flexDirection": "row",
"justifyContent": "space-between",
"alignItems": "center",
"flexWrap": "wrap",
"alignContent": "stretch",
"gap": "16"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-flexbox-generator` tool (CSS Flexbox Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-flexbox-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS Flexboxジェネレーター — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
Flexboxとは何ですか？
Flexbox（display: flex）は、アイテムを1つの行または列に配置し、アイテム間にスペースを配分し、フロートまたは手動ポジショニングなしでアイテムをアラインするためのCSSレイアウトモデルです。ナビゲーションバー、ツールバー、カード行、フォームコントロール、およびアイテムが揃っていて予測可能な方法でスペースを共有する必要があるレイアウトのデフォルトの選択肢です。このツールはflexboxのコンテナ側を構築します — 親要素に配置するルールで、その直接の子をフレックスアイテムに変えます。
このツールが生成するプロパティ
- flex-direction — アイテムが流れる軸:
row（左から右）、row-reverse、column（上から下）、またはcolumn-reverse。 - justify-content — メイン軸に沿ったアイテムのスペース方法:
flex-start、flex-end、center、space-between、space-around、またはspace-evenly。 - align-items — クロス軸に沿ったアイテムの配置方法:
stretch（デフォルト、コンテナを埋める）、flex-start、flex-end、center、またはbaseline。 - flex-wrap — アイテムが1つの行に留まる（
nowrap）か、スペースが不足したときに複数行に折り返す（wrap、wrap-reverse）か。 - align-content — 折り返された複数行のアイテムがコンテナ内でスペース配分される方法。これはメイン軸が
wrapまたはwrap-reverseの場合にのみ目に見える効果を持ちます — 単一行では配分するものがないため、flex-wrapがnowrapの場合、ツールはそれをCSSから完全に省略します。 - gap — アイテム間の固定スペース（ピクセル単位）で、個々の子に余白が必要ありません。
このツールの使用方法
- flex-directionを選択してレイアウトのメイン軸を設定します。
- justify-contentとalign-itemsを設定してメイン軸とクロス軸に沿ったスペーシングとアラインメントを制御します。
- アイテムをオーバーフロー又は縮小させるのではなく新しい行に折り返したい場合はflex-wrapをオンにします — これにより折り返された行間のスペーシングのalign-contentコントロールが表示されます。
- Gapをドラッグしてアイテム間の一貫したスペーシングを設定します。
- CSSボックスから生成されたCSSをコピーするか、
.cssファイルとしてダウンロードし、スタイルシートで実際のフレックスコンテナの親要素にクラス（またはセレクターを適応させて）を適用します。
出力は任意のコントロールを調整すると即座に更新されます — 別の「生成」ステップはありません。
FAQ
align-contentがCSSに表示されないのはなぜですか？
flex-wrapがwrapまたはwrap-reverseに設定されている場合のみ表示されます。nowrapの場合、常にアイテムの行が1つだけなので、align-contentはCSS仕様に従って効果がありません — これを含めるのは単なる不要なコードなので、ツールは自動的にそれを省略します。
align-itemsとalign-contentの違いは何ですか？
align-itemsはアイテムをクロス軸上の行内でアラインします。align-contentは複数の行がある場合（つまり、アイテムが折り返される場合）かつコンテナに余分なスペースがある場合に行そのものをアラインします。
flex-growまたはorderなどのアイテムごとのプロパティが含まれていますか？
いいえ — このツールはすべての子に一度に適用されるコンテナレベルのルールに焦点を当てています。アイテムごとのオーバーライド（flex-grow、flex-shrink、flex-basis、align-self、order）は、スタイルシートで直接アイテムごとに個別のルール（例えば.item:nth-child(2) { flex-grow: 1; }）を使って設定されます。
.containerセレクターの名前を変更する必要がありますか？
はい — .containerはCSSがペーストの準備ができるようにするためのプレースホルダーです。実際のフレックス親要素のクラスまたはセレクター（例えば.navbar、#header、.card-list）に置き換えます。
これはすべてのブラウザで機能しますか？
はい。Flexboxはすべての主要なブラウザで長年にわたってプレフィックスなしでサポートされており、フレックスコンテナのgapもすべての最新のブラウザでサポートされています。
プライバシー
すべてはブラウザで発生します。入力するCSS、値、または設定がサーバーに送信されることはありません — 宣言は入力時にローカルで生成および更新されます。