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

本文介绍了如何在Flexbox中使用安全中心?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

集中的flexbox项可能有不良行为当他们的容器溢出时.

Centred flexbox items can have undesirable behaviour when they overflow their container.

已经为此问题提供了几种非弹性解决方案，但是根据MDN ，有一个safe值，说明如下.

Several non-flex solutions have been provided for this issue, but according to MDN there is a safe value which is described as follows.

它可以如下使用.

align-items: safe center;

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

Unfortunately, I haven't been able to find any examples or discussions of this, or determine how much browser support there is for it.

我试图在此CodePen中使用safe .但是，它对我不起作用. safe似乎被忽略了，或者容器元素的样式不正确.

I have attempted to use safe in this CodePen. However, it doesn't work for me. The safe seems to be ignored, or perhaps the container element is improperly styled.

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

I'd really appreciate it if anyone could shed some light on safe and whether and how it can be used to solve the overflow problem, as demonstrated by the CodePen example.

推荐答案

safe关键字仍然是工作草案，并且还没有很多(如果有的话)浏览器支持它，因此要获得相同的效果，请跨浏览器使用自动边距暂时应在弹性项目上设置.

The safe keyword is still a working draft, and not many (if any) browsers support it yet, so to get the same effect, cross browser, use auto margins for now, which should be set on the flex item.

更新的代码笔

注意，要补偿modal的50px上/下边距，请在modal-container上使用padding.

Note, to compensate for the modal's 50px top/bottom margin, use padding on 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;
}

这篇关于如何在Flexbox中使用安全中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

SAFE