开发者 / CSS布局

Flexbox Playground：容器和项目CSS控制

尝试flex方向、换行、两端对齐、对齐方式和间距，然后调整每个项目的增长、收缩、基准、顺序和对齐方式。查看布局变化并复制CSS。

Flexbox Playground：容器和项目CSS控制: 显示一个实时Flex容器，并在每个控件旁提供可编辑的项目属性和简短说明。预览区域具有固定高度，便于查看交叉轴效果。若需要让多行和多列共享网格轨道，请使用CSS Grid生成器。 完全在浏览器中本地运行，文件不会上传到服务器。

类别
开发者工具
使用次数
在浏览器中
费用
免费·无需注册
可用性
可直接使用
Flexbox布局台本地处理

完全在浏览器中运行

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
  gap: 12px;
}
.item-1 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-2 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-3 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-4 { flex: 0 1 120px; order: 0; align-self: auto; }
.item-5 { flex: 0 1 120px; order: 0; align-self: auto; }

使用Flexbox布局行或列。当行和列都需要共享轨道时，请使用CSS Grid。 打开CSS Grid生成器

已选项目1

Flex布局模型

W3C CSS弹性盒布局模块第1级：https://www.w3.org/TR/css-flexbox-1/。剩余空间会沿主轴按照Flex增长权重和收缩权重进行分配。

对齐与无障碍访问

MDN Flexbox基本概念：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox。交叉轴垂直于主轴；视觉上的重新排序不会改变文档顺序。

使用方法

  1. 设置容器的方向、换行和对齐方式。
  2. 点击一个项目，调整其单独的尺寸和对齐方式。
  3. 添加或移除项目，检查布局并复制生成的CSS。

隐私与限制

布局设置会在浏览器中本地处理。

相关工具

CSS Grid裁剪路径CSS格式化工具

常见问题

为什么align-content有时不起作用？

它用于分配Flex行。要产生可见效果，需要启用换行、存在多行，并且交叉轴上有剩余空间。

order会改变屏幕阅读器的阅读顺序吗？

不会。它只会改变视觉顺序，文档阅读顺序和键盘操作顺序保持不变。请保持合理的文档顺序。

什么时候应该改用Grid？

当行和列需要共享网格轨道时，请使用Grid。如果主要沿一个轴排列项目，Flexbox会更实用。

免费工具·使用在浏览器中次·无需账户