如何在 flexbox 中使用安全中心？答案

【问题标题】：How to use safe center with flexbox?如何在 flexbox 中使用安全中心？
【发布时间】：2018-05-18 01:39:14
【问题描述】：

居中的 flexbox 项目可能有不良行为 when they overflow their container。

已经针对这个问题提供了几种非弹性解决方案，但according to MDN 有一个safe 值，描述如下。

如果项目的大小超出对齐容器，则项目会像对齐模式开始一样对齐。

可以如下使用。

align-items: safe center;

不幸的是，我无法找到任何关于此的示例或讨论，或者确定有多少浏览器支持它。

我尝试使用safe in this CodePen。但是，它对我不起作用。 safe 似乎被忽略了，或者容器元素的样式可能不正确。

如果有人能阐明safe 以及它是否以及如何用于解决溢出问题（如 CodePen 示例所示），我将不胜感激。

【问题讨论】：

Rachel Andrew 在这个smashing magazine article 中讨论了安全对齐，那里还有一个codepen demo。顺便说一句：目前安全对齐适用于 Firefox
center safe 适用于 Chrome 84
不，center safe 在 Chrome 中不起作用。

标签： css flexbox

【解决方案1】：

safe 关键字仍然是working draft，目前还没有很多（如果有的话）浏览器支持它，所以为了获得相同的效果，跨浏览器，现在使用auto margins，应该设置在弹性项目。

Updated codepen

注意，为了补偿 modal 的 50px 顶部/底部边距，请在 modal-container 上使用 padding。

.modal-container
{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;                /*  changed  */
  position: fixed;
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  padding: 50px 0;                        /*  added  */
  box-sizing: border-box;                 /*  added  */
}
.modal-container > #modal
{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto 0;                         /*  changed  */
  padding: 12px;
  width: 50%;
  background-color: #333;
  cursor: pointer;
}

【讨论】：

【解决方案2】：

safe 尚未在大多数浏览器中实现。您可以使用自动边距重新创建它的一些功能。

当视口很宽时，我试图使用justify-content: safe center 将一堆项目置于页脚的中心，但当视口很小时，让它们能够滚动而不剪裁左侧。

当我按照 Ason 的建议尝试使用自动边距修复此问题时，它确实修复了剪裁，但它也将项目均匀地展开，这不是我想要的。

我发现我可以通过仅对第一个和最后一个元素应用自动边距来模拟这种情况下的安全中心。

假设我的弹性项目有类“项目”：

.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right: auto;
}

CodePen with examples comparing each solution

【讨论】：