如何使用flexbox安全中心?

时间:2017-12-04 14:46:25

标签: css css3 flexbox

居中的Flexbox项目可能会有不良行为when they overflow their container

已针对此问题提供了多种非灵活解决方案,但according to MDN存在safe值,其描述如下。

  

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

可以如下使用。

align-items: safe center;

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

我试图使用safe in this CodePen。但是,它对我不起作用。 safe似乎被忽略了,或者容器元素的样式可能不正确。

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

2 个答案:

答案 0 :(得分:11)

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

Updated codepen

注意,要补偿modal的50px上/下边距,请在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;
}

答案 1 :(得分:0)

safe尚未在大多数浏览器中实现。您可以使用自动边距重新创建其某些功能。

我试图使用justify-content: safe center在视口较宽时将一堆项目居中放置在页脚中,但是当视口较小时,使它们能够滚动而不切掉左侧。

当我尝试按照Ason的建议使用自动页边距来解决此问题时,它确实修复了剪裁,但也将项目均匀地散布了,这不是我想要的。

我发现我可以在这种情况下通过仅对第一个和最后一个元素应用自动边距来模拟安全中心。

假设我的弹性商品的类别为“商品”:

.item:first-child {
    margin-left: auto;
}
.item:last-child {
    margin-right: auto;
}

CodePen with examples comparing each solution