定心盒摘要

这 定心盒 是一个 3 x 3 的网格，出现在 样式面板 > 布局 当显示配置为 flex 或 grid 时。可以使用居中框作为 flex 父级或 grid 的视觉表示，以便快速对齐父级组件中的 flex 和 grid 子级。

首先，选择居中框 细胞 您想要对齐内容的位置，或点击 定心盒 聚焦到它并使用键盘上的箭头键在其单元格之间移动。您可以双击居中框单元格和/或使用快捷方法快速对齐 flex 和 grid 子元素。

当你与居中框交互时，屏幕会镜像你的调整，并且 X 和 是 轴下拉菜单得到更新以显示当前的对齐配置。

快速方法

柔性

• 建立理由（例如 justify-content）以 之间的空间：双击居中框单元格或 命令 （在 Mac 上）或 控制 （在 Windows 上）+ 点击居中框 细胞
• 建立对齐方式（例如 align-items） 拉紧: 选项 （在 Mac 上）或 Alt （在 Windows 上）+ 点击居中框 细胞

了解有关对齐弹性子元素的更多信息。

网格

• 建立理由（例如 justify-items）以 拉紧：双击居中框单元格或 命令 （在 Mac 上）或 控制 （在 Windows 上）+ 轻敲 定心盒 细胞
• 建立对齐方式（例如 align-items） 拉紧: 选项 （在 Mac 上）或 Alt （在 Windows 上）+ 点击居中框 细胞

了解有关对齐网格子项的更多信息。

评论： 某些对齐选项不仅可以通过居中框访问，还可以通过 X 和 Y 轴下拉菜单访问。