Flexboxビルダー
方向、折り返し、整列、間隔を設定し、各アイテムのサイズと順序を編集します。横並び、中央、カード、縦並びから開始できます。
主軸はjustify-content、交差軸はalign-items。align-contentは複数行を制御します。固定高さではstretchによるサイズ変化が見えない場合があります。
アイテム
ライブプレビュー
画面より幅が広い場合はスクロールしてください。背景・枠・ラベルは表示用で、レイアウトCSSのみ出力します。
使い方
使い方
- プリセットとコンテナーの属性・サイズを設定します。
- 最大12個のアイテムでgrow、shrink、basis、order、align-self、幅・高さを編集します。
- プレビュー後にCSSを保存し、親子の対応クラスを適用します。
コンテナーとアイテム
4方向、3折り返し、主軸配置、align-items、align-content、gap。各grow/shrinkは0～20、basisはautoまたはpx/%、orderは−100～100の整数、align-self、幅0～600px、高さ0～400px。コンテナー幅100～1200px、高さ80～600px、間隔0～100px。
軸を理解する
justify-contentは主軸、align-itemsは交差軸です。align-contentは複数行用です。固定寸法ではstretchが変化しない場合があります。grow/shrink/basisで主軸寸法は指定と異なる場合があります。orderは表示だけを変更し、DOM順は変えません。
ローカルCSS出力
最小サイズ0とborder-boxを含む同じ値をプレビューに使います。色・枠・ラベルは表示用です。コンテナー/アイテムのCSSのみ出力し、HTML、SCSS、Tailwind、メディアクエリーは含みません。アップロード・保存はありません。実際の内容と周囲のCSSで結果は変わります。
よくある質問
あわせて知りたいこと
align-contentが変わらないのは？
複数行を制御します。wrapを有効にし、複数行になる数のアイテムを使ってください。
orderは読み上げ順を変えますか？
いいえ。見た目のみ変更します。HTMLの順序を適切にしてください。