代码之家 › 专栏 › 技术社区 › Charlie McShane

Flex Wrap+TransformY在Safari中不起作用

transform flexbox safari css twitter-bootstrap

Charlie McShane · 技术社区 · 7 年前

因此,我使用Flex-Wrap将引导程序3中的许多列保持在彼此相同的高度。然而,当我想将内容垂直集中在自己的列中时;在横向上,我使用以下典型代码:

.equal {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  flex-wrap: wrap;
}

.centered {
  position: relative;
  float: left;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

虽然这在Opera、Firefox、Chrome和Internet Explorer/Edge中完全可以正常工作。它是游猎拒绝打球 将转换代码的转换段弄乱。

我已附上 CodePen example 让你看看到底是怎么搞砸的。

1 回复 | 直到 7 年前

Dan Brazier 7 年前

太长,读不下去了 CodePen example

这里有几件事我要考虑一下。

首先,flexbox和positioning紧密结合使用时有一些怪癖,尤其是与Safari一起使用时。这里的大多数问题都解决了,但仍有一些小的、令人沮丧的事情我不时遇到。

其次,看起来您正在使用自己的一些代码来复制Bootstrap中已经存在的东西,这可能会混淆问题。

我已经构建了我的示例代码,并模糊地使用了您将在Bootstrap 4中找到的flex类,这样您可以在迁移时减轻负担。

在我看来,这里的一般概念是:

<div class="container">

    <div class="row d-flex">
    <!-- Make the row a flex wrapper, this will make columns the same height -->

        <div class="col d-flex">
        <!-- Make each col a flex wrapper, to use flex properties to dynamically center content -->
        </div>
        <div class="col d-flex">
        </div>
        <div class="col d-flex">
        </div>
    </div>
</div>

推荐文章

Luca Phillips · 当表是div flex的子级时,它有巨大的空间

2 年前

Nishit Agrawal · Flexbox-将第三项与第二项对齐

2 年前

alan · 有没有办法向flexbox图像添加链接?

2 年前

Gary · CSS在弹性方框布局中用句点字符串填充段落剩余部分的方法?

2 年前

n1234 · Flexbox-图像和内容

6 年前

nCardot · 为什么是!h1元素媒体查询工作所需的重要信息?[副本]

6 年前

Adam Olsson · 在中心CSS中对齐单个列表项

6 年前

London804 · 我是否可以使设置为对齐内容的元素:换行时间距向右对齐?

6 年前

user3137124 · 当“flex direction”为“column”时,如何将div与顶部对齐?[副本]

6 年前

AJ- · 无法垂直对齐文本-angularJS+bootstrap+flexbox

6 年前