CSS Flexbox プレイグラウンド
CSS Flexboxのプロパティを直感的に操作して、レイアウトを確認できるツールです。生成されたCSSコードはワンクリックでコピーできます。
Container Properties
Preview
1
2
3
.container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
gap: 10px;
}
.item-1 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}
.item-2 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}
.item-3 {
order: 0;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
align-self: auto;
}使い方
- STEP 1
- 左側のパネルでコンテナのプロパティ（flex-directionなど）を設定します
- STEP 2
- アイテムをクリックして、個別のプロパティ（flex-growなど）を調整します
- STEP 3
- プレビューでレイアウトを確認し、下部のコードをコピーして使用します
注意事項
- ブラウザによってFlexboxの挙動が若干異なる場合があります
- このツールは最新のモダンブラウザでの動作を想定しています
豆知識
1
gapプロパティを使うと、アイテム間の余白を簡単に設定できます
2
flex-wrap: wrapを指定すると、アイテムが折り返して表示されます
3
align-items: centerとjustify-content: centerを組み合わせると、簡単に中央揃えができます
よくある質問
QUESTION 1
Flexboxとは何ですか？
CSSのレイアウトモジュールの一つで、柔軟なレイアウトを簡単に作成するための仕組みです。
QUESTION 2
gapが効かない場合は？
古いブラウザ（特に古いSafariなど）ではgapプロパティがサポートされていない場合があります。
QUESTION 3
縦方向の中央揃えがうまくいかない時は？
コンテナに高さ（height）が設定されているか確認してください。高さがないとalign-items: centerが効きません。