一尘不染

如何在Flexbox中使用安全中心?

css

当居中的flexbox项溢出其容器时,它们可能具有不良行为。

已经针对此问题提供了几种非灵活的解决方案,但是根据MDN,存在一个safe如下所述的值。

如果项目的大小溢出对齐容器,则将对齐该项目,就好像对齐模式已开始一样。

可以如下使用。

align-items: safe center;

不幸的是,我无法找到任何示例或讨论,也无法确定浏览器对此有多少支持。

我试图safe在此CodePen中使用。但是,它对我不起作用。本safe似乎被忽略,或者容器元素是不正确的风格。

safe如CodePen示例所示,如果有人可以阐明它以及是否以及如何用于解决溢出问题,我将非常感激。


阅读 233

收藏
2020-05-16

共1个答案

一尘不染

safe关键字仍然是有效的草稿,并且还没有很多(如果有的话)浏览器支持该关键字,因此要获得相同的效果,请跨浏览器暂时使用[自动边距],该边距应在flex项目上设置。

请注意,要补偿modal50px的上下边界,请padding在上使用modal-container

.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;
}
2020-05-16