🎨

CSS Flexbox Playground

css · flexbox · layout

flex-direction

flex-wrap

justify-content

align-items

align-content

gap: 8px

アイテム数: 6

CSS

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: flex-start;
  gap: 8px;
}

使い方

1
flexプロパティを調整します。
2
プレビューで配置を確認します。
3
生成されたCSSをコピーします。

FAQ

このツールは無料ですか？

はい、登録もインストールも不要で、すぐに完全無料で使えます。

このツールはどんなツールですか？

CSSフレックスボックスのプロパティをビジュアルで試せます。方向・折り返し・整列・ギャップをリアルタイム調整してCSSをコピー。登録もインストールも不要で、ページを開けばすぐに無料でお使いいただけます。