Flexbox 生成器

可视化 Flex 布局 / 实时预览 / 生成CSS代码

flex-direction

justify-content

align-items

flex-wrap

gap: 10px

子元素数量: 4

生成的CSS代码

.container {
  display: flex;
  gap: 10px;
}

Flexbox布局简介

Flexbox是CSS一维布局模型，擅长在一个方向上对齐和分布元素。flex-direction控制主轴方向，justify-content控制主轴对齐，align-items控制交叉轴对齐。如需二维布局可使用CSS Grid生成器。