CSS Flexboxプレイグラウンド
Flexboxのプロパティを設定してレイアウトをリアルタイムで確認し、CSSコードを生成します。
プレビュー
1
2
3
4
5
生成されたCSS
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: normal;
gap: 8px;
}使い方
1. flex-direction・flex-wrap・justify-content などのプロパティを選択します。
2. スライダーでアイテム数を増減してレイアウトの変化を確認できます。
3. 「コピー」ボタンで生成されたCSSをクリップボードにコピーします。
wrap を有効にするとアイテムが折り返され、align-content が有効になります。
おすすめサービス
Canva Pro - デザインツール
デザインプロ品質のデザインを簡単作成。テンプレート豊富で初心者にもおすすめ。
Adobe Creative Cloud
デザインPhotoshop・Illustrator等のプロ向けデザインツール。学割あり。
※ PR・広告を含みます