CSS Flexbox ジェネレーター - ビジュアルFlexビルダー

A デフォルトの `flex-shrink: 1` が原因です。Flexboxはコンテナに収めることを優先し、アイテムを縮めます。特定のアイテムの幅を固定したい場合は、`flex-shrink: 0` を設定してください。ジェネレーターで試してみましょう：`width: 300px` のアイテムを追加し、`flex-shrink` を1から0に切り替えてください。コンテナを狭めても幅が変わらないのを確認できます。

A 問題ありません。スライダーを動かせばプレビューが即座に更新されます。ただ、`flex-direction`が行と列を制御する程度の基礎知識があると便利です。ジェネレーターは生成されるCSSコードも表示するので、自然に文法を覚えられます。コツ：初期設定から始めて、一度に一つのプロパティだけ変更してみてください。チュートリアル不要でFlexboxが身につきます。

A 余白を比率に応じて吸収します。アイテムAがflex-grow: 1、アイテムBがflex-grow: 3なら、BはAの3倍の余白を得ます。コンテナ全体の幅は変わりません。ジェネレーターでスライダーを動かせば、色付きバーが伸び縮みする様子を即座に確認できます。実用的なコツ：整数を使えばブラウザが比率を計算してくれます。電卓は不要です。

A `flex-wrap: wrap`が設定されていないからです。ラップなしだと全要素が1行に押し込まれ、どんどん縮みます。ジェネレーターで5つ要素を追加して、縮む様子を見てみましょう。`flex-wrap`を「wrap」に切り替えると、次の行に流れ込みます。コツは各アイテムに`min-width: 150px`を指定しておくこと。これで行がきれいに折り返されます。

A 安全です。すべてブラウザ内でローカルに動作し、レイアウトデータ・CSSコード・プロジェクトファイルが外部に送信されることはありません。Cookieやトラッカー、クラウド保存も不使用で、アカウント登録なしで保存やエクスポートができます。NDA契約を扱う制作会社でも、第三者サーバーを気にせずコード生成とコピーが可能です。実用的なヒント：ブラウザのネットワークタブを一度確認してみてください。作業中は送信リクエストがゼロであることが分かります。

A いいえ、これで多くの人がつまずきます。パーセント幅は固定的で、常にコンテナのその割合を占めます。flex-growは、アイテムが基本サイズを取った後の余白だけを分配します。つまり3つのアイテムがflex-grow: 1でも、コンテンツ幅が違えば均等な3分の1にはなりません。ジェネレーターで3つのアイテムに異なるパディングを設定し、width: 33%とflex: 1を切り替えてみてください。違いがすぐ分かります。実用的なヒント: 予測可能な比率にしたいならflex-basisとflex-growを組み合わせましょう。

A align-itemsは各行を単一ユニットとして扱い、stretchやcenter、flex-startなどでアイテムをライン内に配置します。align-contentはflex-wrapで複数行になったときだけ働き、行同士の間隔を調整します。ジェネレーターで6つのアイテムを追加しflex-wrap: wrapに設定して、両方のスライダーを切り替えてみてください。行が折り返されるまでalign-contentが何もしないのが確認できます。実用的なヒント：1行だけを中央揃えするならalign-items、複数行レイアウトなら両方をcenterに設定すると綺麗に収まります。

A 適切なセレクターに貼り付ければ問題ありません。ジェネレーターはdisplay: flexやjustify-content: space-betweenといった綺麗なCSSを出力し、.containerクラスですぐに使えます。競合するグローバルスタイルがないか事前に確認しておきましょう。スニペットを貼り付けて保存し、ブラウザを更新して確認してください。

A コンテナのルールを入力パネルに直接貼り付けることができます。パーサーがflex-directionなどのプロパティを抽出し、ビジュアルエディタへ即座に反映します。短いflexブロックを貼り付けて、キャンバスの変化を確認してください。非対応のプロパティはエラーを出さずに無視されます。作業前にスタイルシートのバックアップを取っておくと安心です。

A アイテムの縮小が拒否されるとmax-widthルールは無視されます。デフォルトでは最小幅がautoになり、コンテンツのサイズが維持されます。ジェネレーターの設定パネルでmin-widthを0に下げると、テキストが正常に折り返されます。3番目のボックスに長い文字列を入力して確認してください。実用的なヒント: 長い単語が含まれる場合は、常にmax-widthとmin-width: 0を併用します。