CSS flexboxジェネレーター

CSS flexboxジェネレーター: 用途

flexboxは、CSSで項目を行や列に揃える最も一般的な方法ですが、プロパティ名は初心者を混乱させがちです。

ここでは、セレクターで各オプションを変えると、項目がすぐに動きます。方向、折り返し、主軸の配分、交差軸の揃え、align-content、項目の間隔です。コードは、初期値から変更した部分だけを表示し、他の選択と組み合わせると効果がないプロパティについては知らせます。

使い方

1. 方向、揃え、折り返しのオプションを選びます。
2. gap、項目数、伸びる項目を調整します。
3. コンテナのCSSをコピーします。

使うタイミング

• 画面の中央に要素を置く。
• メニューやボタンの行を作る。
• flexboxを実践で学ぶ。

よくある質問

justify-contentとalign-itemsの違いは？

justify-contentは主軸（方向がrowなら水平）に項目を配分し、align-itemsは交差軸（同じ場合は垂直）で揃えます。方向をcolumnにすると、2つの軸が入れ替わります。

flexboxとgridはどう使い分けますか？

flexboxは1次元向けです。ボタンの行、メニュー、スペースに合わせて収まる項目などに使います。gridは、ギャラリーやページのレイアウトのように、2次元を同時に扱う場合に向いています。2つを一緒に使うこともできます。

gapは何のためにありますか？

端に余白を作らずに、項目の間にスペースを入れます。以前は、marginと:last-childのようなセレクターが必要でした。flexboxでは、現在のすべてのブラウザで動作します。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール