CSS Flexbox生成CSS Flexbox Generator
方向・揃え位置・間隔をボタンとスライダーで調整し、Flexboxのレイアウトコードを視覚的に生成。Visually generate Flexbox layout code by adjusting direction, alignment, and gap.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
使い方・ユースケース How to Use & Use Cases
並び方向（横/縦）、主軸・交差軸の揃え位置（justify-content / align-items）、折り返し、間隔（gap）をボタンとスライダーで選ぶと、プレビューの箱がリアルタイムに動き、対応するCSSコードが生成されます。コピーボタンでそのままCSSファイルに貼り付けられます。 Choose direction (row/column), main-axis and cross-axis alignment (justify-content / align-items), wrap, and gap using buttons and a slider to see the preview boxes move live and the matching CSS generated. Copy it straight into your CSS file.
ナビゲーションバーやカードの横並びレイアウトを組みたいとき、要素を中央揃えにする書き方を毎回忘れてしまうとき、レスポンシブな折り返しレイアウトを試作したいときに使えます。 Useful for building nav bars or horizontally arranged card layouts, quickly recalling how to center elements, or prototyping a responsive wrapping layout.
よくある質問FAQ
生成されるCSSはどのプロパティですか？Which CSS properties are generated?
親要素の`display: flex`、`flex-direction`、`justify-content`、`align-items`、`flex-wrap`、`gap`を生成します。The parent's display: flex, flex-direction, justify-content, align-items, flex-wrap, and gap.
FlexboxとCSS Gridはどちらを使うべきですか？Should I use Flexbox or CSS Grid?
1方向（横一列・縦一列）の並びにはFlexbox、行と列の両方を制御する2次元レイアウトにはCSS Gridが向いています。ナビゲーションやボタン群にはFlexbox、ギャラリーやダッシュボードにはGridが一般的です。Flexbox suits one-dimensional layouts (a single row or column). CSS Grid suits two-dimensional layouts controlling both rows and columns. Nav bars and button groups typically use Flexbox; galleries and dashboards typically use Grid.
子要素側の設定（flex-grow等）には対応していますか？Does this support child-level properties like flex-grow?
本ツールは親要素側のプロパティ生成に特化しています。個別の子要素の`flex-grow`・`flex-shrink`・`align-self`は生成されたCSSに手動で追加してください。This tool focuses on generating parent-level properties. Add child properties like flex-grow, flex-shrink, or align-self manually to the generated CSS.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
