Flex对齐程序在Firefox / Edge上运行，而不是在Chrome上运行 [英] Flex aligner working on Firefox/Edge, not on Chrome

问题描述

我无法让对齐程序与Chrome协同工作，但它在Firefox和Edge上都有效。

I can't make a aligner working with Chrome, yet it's working on both Firefox and Edge.

我使用flex CSS：

I am using flex CSS:

body {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    wrapper {
      height: 100%;
      /* flex: 1; would be enough but it looks bad in IE */
      flex: 1 0 auto;
      background-color: #3D9970;
    }

    .aligner {
        height:100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .aligner-center {
        max-width: 50%;
        background-color: #ffb443;
        padding: 20px;
    }

您看到结果这里

我也尝试过 display：table

I also tried with display:table with no success.

任何想法如何对齐我的登录表单div和Chrome吗？

Any idea how to align center my Login Form div with Chrome too?

感谢

推荐答案

这是Chrome预期的行为，因为它有更严格的实施 Flexbox spec / a>（也请查看此主题）：

That is expected behavior in Chrome as it has a stricter implementation of the Flexbox spec (take a look at this thread too):

1. align-self 属性的默认伸展值只更改元素 cross size 属性（ height ）的

1. The default stretch value of align-self property changes only the used value of the element's cross size property (height in this case).

百分比是根据父级的跨尺寸属性的显式指定的值

Percentages are calculated from the explicitly specified value of the parent's cross-size property, not it's used value.

相对于
生成的框的包含块的高度。如果未明确指定包含
块的高度（即，它取决于内容
height），并且此元素不是绝对定位的，值
计算为'auto'（< a href =https://www.w3.org/TR/CSS2/visudet.html#x12 =nofollow noreferrer> 来源：W3C ）。

这意味着 height：100％ c $ c> aligner 这是 wrapper 的子项（依次是 flexbox ）。由于我们没有在 wrapper 上指定高度，这意味着它将选择默认高度的100％，即 auto 。

That means that setting height:100% on aligner which is the child of wrapper (in turn the flex child of a flexbox). Since we haven't specified a height on wrapper, that means it will pick 100% of the default height, which is auto.

解决方案：

的解决方案是让你的包装器 a flexbox 并给出 width：100％ / code> for aligner - 请参阅下面的演示：

One of the solutions is to make your wrapper a flexbox too and give width: 100% for the aligner - see demo below:

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
wrapper {
  height: 100%;
  /* flex: 1; would be enough but it looks bad in IE */
  flex: 1 0 auto;
  background-color: #3D9970;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aligner {
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aligner-center {
  max-width: 50%;
  background-color: #ffb443;
  padding: 20px;
}
body {
  font: 16px/1.5 sans-serif;
}
p {
  margin-bottom: 1em;
}
header,
wrapper,
footer {
  padding: 2em;
  color: white;
}
header {
  background-color: #85144B;
}
footer {
  background-color: #001F3F;
}

<header>
  Header
</header>
<wrapper>
  <div class="aligner">
    <div class="aligner-center">
      Login Form
    </div>
  </div>
</wrapper>
<footer>
  Footer
</footer>

这篇关于Flex对齐程序在Firefox / Edge上运行，而不是在Chrome上运行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！