Flexbox / Grid 可视化

可视化调整对齐、换行与间距，生成布局 CSS

布局

方向

换行

主轴对齐

交叉轴对齐

间距12px

CSS

display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
gap: 12px;

预览里的方块高度不一，方便看出 align-items 的效果；Grid 模式下用 repeat(N, 1fr) 均分列宽。