カラーコード変換
HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。
CSS Flexbox ジェネレーター
方向、折り返し、間隔、整列をライブプレビューで試し、対応する CSS と HTML を取得できます。
このツールについて
ボタンや操作部品の並びを、狭い幅での折り返しも含めて検討できます。
使い方
方向、折り返し、主軸・交差軸の配置を選び、間隔と項目数を調整します。幅を変えると折り返しを確認できます。CSS と HTML を切り替えてそれぞれコピー・保存してください。
プレビューと出力は同じ Flex プロパティを使います。項目の基準幅は 100 px、最低高さは 80 px です。項目数は 48、間隔は 0～80 px まで。プレビュー幅は出力 CSS に含めません。
よくある質問
プレビューの幅も出力されますか？
幅は表示領域を試すための設定です。出力には flex の規則と基本的な項目サイズが入り、実際の幅や見た目はページ側で設定します。
column に変えると中央揃えの方向が変わるのはなぜですか？
justify-content は主軸、align-items は交差軸を制御します。row の主軸は横方向、column の主軸は縦方向です。両方向を中央に揃えるには両方を center にし、コンテナーにもそれぞれの方向で余白を確保してください。
関連ツール
新しいタブで開きます
コメント
0