预览是真实的弹性布局吗？

是的。带编号的盒子正是用你所设置的那套 CSS 排列的，而不是一张示意图，所以你看到的效果就是复制后的规则会产生的效果。

为什么改变 flex-direction 会改变 justify-content 的效果？

justify-content 始终沿主轴起作用，而 flex-direction 决定了主轴是水平方向还是垂直方向。切换到 column 后，“对齐”的方向会从左右变成上下。

不会。CSS 是根据你设置的控件在页面内组装的文本，预览也是在本地渲染的。

可视化构建弹性容器并复制 CSS

在由真实弹性子项组成的实时预览上设置 flex-direction、flex-wrap、justify-content、align-items 和间距，然后复制生成的容器声明。这里的一切都不会离开你的浏览器。

间距 12px子项数量 4

1234

输出

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

本页的所有处理都在浏览器中完成，不会上传任何内容。

Flexbox 有五个相互影响的属性——方向一变，连“主轴”对换行和 justify-content 意味着什么都会跟着改变——所以直接看效果远比在脑海里推演要快。这个工具会在屏幕上保留一个带编号子项的真实弹性容器，因此每个选项的效果都能对照盒子的实际移动来判断，而不用凭空想象规范的行为。

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享，关闭标签页即随之消失。

预览是真实的弹性布局吗？: 是的。带编号的盒子正是用你所设置的那套 CSS 排列的，而不是一张示意图，所以你看到的效果就是复制后的规则会产生的效果。
为什么改变 flex-direction 会改变 justify-content 的效果？: justify-content 始终沿主轴起作用，而 flex-direction 决定了主轴是水平方向还是垂直方向。切换到 column 后，“对齐”的方向会从左右变成上下。
我的布局信息会被上传吗？: 不会。CSS 是根据你设置的控件在页面内组装的文本，预览也是在本地渲染的。