CSS Flexboxジェネレーター - ビジュアルFlexboxビルダー

ライブプレビューでCSS Flexboxレイアウトをビジュアルに作成

CSSツール

Tool

Flex Container

flex-directionjustify-contentalign-itemsflex-wrapgap (8px)item count (4)

CSS

display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 8px;

使い方

Flexboxは、コンテナ内の要素を主軸に沿って配置できるCSSレイアウトモデルです。floatやポジショニングのハックなしで、配置、間隔、順序の調整を簡単に行えます。

justify-contentは主軸方向の配置を制御し（rowの場合は水平、columnの場合は垂直）、align-itemsは交差軸方向の配置を制御します。