如何在Flexbox中使用安全中心? [英] How to use safe center with 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.

如果项目的大小超出对齐容器的大小，则将对齐该项目，就像对齐模式已启动一样.

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;

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

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中使用安全中心?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！