ToolNext

フレックスボックスプレイグラウンド

CSS Flexboxレイアウトをビジュアルで学習&デバッグ

gap8px
tools.flexbox-playground.childCount4
1
2
3
4
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 8px;
}

工具说明

flex-direction・justify-content・align-itemsなどのプロパティをビジュアル調整してリアルタイムでレイアウトをプレビューし、CSSコードを出力するオンラインプレイグラウンド。

flexboxcssflex布局justifyalign