如何在 flexbox 中使用安全中心? [英] How to use safe center with flexbox?

问题描述

居中的 flexbox 项目可能有不良行为 当它们溢出容器时.

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

针对这个问题已经提供了几个非 flex 解决方案，但是 根据 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屋！