css – 如何使用flexbox安全中心？

中心的flexBox项目可能具有不良行为 when they overflow their container.

已经为此问题提供了几种非灵活的解决方案,但是according to MDN存在安全值,其描述如下.

If the size of the item overflows the alignment container,the item is instead aligned as if the alignment mode were start.

它可以如下使用.

align-items: safe center;

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

我试图使用安全in this CodePen.但是,它对我不起作用.似乎忽略了保险箱,或者容器元素的样式不正确.

如果有人能够了解安全以及是否以及如何使用它来解决溢出问题,我真的很感激,正如CodePen示例所示.

解决方法

safe关键字仍然是 working draft,并没有多少(如果有的话)浏览器支持它,所以为了获得相同的效果,跨浏览器,现在使用 auto margins,应该在flex项目上设置.

Updated codepen

注意,为了补偿模态的50px上/下边距,请在模态容器上使用填充.

.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;
}