Toolypet
Tools
Blog
言語を変更
テーマを切り替え
CSSツール
/
フレックスボックスプレイグラウンド
フレックスボックスプレイグラウンド
インタラクティブなビジュアルコントロールでCSS Flexboxのレスポンシブレイアウトを構築
プレビュー
リセット
アイテムを追加
1
2
3
コンテナプロパティ
フレックス方向
row
row-reverse
column
column-reverse
フレックスラップ
nowrap
wrap
wrap-reverse
コンテンツの配置
flex-start
flex-end
center
space-between
space-around
space-evenly
アイテムの整列
flex-start
flex-end
center
stretch
baseline
コンテンツの整列
flex-start
flex-end
center
stretch
space-between
space-around
間隔
10px
プリセット
基本の行
すべて中央揃え
両端揃え
周囲に余白
均等配置
列レイアウト
逆行
逆列
アイテムを折り返す
アイテム
Item 1
フレックスグロー
フレックスシュリンク
自身の整列
auto
flex-start
flex-end
center
stretch
baseline
順序
Item 2
フレックスグロー
フレックスシュリンク
自身の整列
auto
flex-start
flex-end
center
stretch
baseline
順序
Item 3
フレックスグロー
フレックスシュリンク
自身の整列
auto
flex-start
flex-end
center
stretch
baseline
順序
CSSコード
Loading...