CSS Flexbox ジェネレーター

方向、折り返し、間隔、整列をライブプレビューで試し、対応する CSS と HTML を取得できます。

flex-direction

row row-reverse column column-reverse

flex-wrap

wrap nowrap wrap-reverse

justify-content align-items

gap · px 要素数

プレビューの幅（%）

出力形式

CSS HTML

このブラウザー内で処理します。アップロードや保存は行いません。

このツールについて

方向、折り返し、間隔、整列をライブプレビューで試し、対応する CSS と HTML を取得できます。

デザイン

方向、折り返し、主軸・交差軸の配置を選び、間隔と項目数を調整します。幅を変えると折り返しを確認できます。CSS と HTML を切り替えてそれぞれコピー・保存してください。

プレビューと出力は同じ Flex プロパティを使います。項目の基準幅は 100 px、最低高さは 80 px です。項目数は 48、間隔は 0～80 px まで。プレビュー幅は出力 CSS に含めません。

HEX・RGB・HSL と透明度を変換し、色をプレビューしながら CSS の値をコピーできます。

デザイン

文字色と背景色の WCAG 2.2 コントラスト比を測定し、通常文字と大きな文字の適合状況を表示します。

デザイン

線形・放射状グラデーションを見ながら作成。色、位置、角度を調整して CSS をコピーできます。

デザイン

ずれ、ぼかし、広がり、色、不透明度を調整し、外側・内側の影を確認して CSS を取得できます。

デザイン

してディスカッションに参加してください。

コメントはまだありません。