Question

我很难让Chrome和IE11以相同的方式显示Flex设置。为了使页脚按IE中的预期方式运行，我需要使用 flex-basis：auto ，这反过来会破坏中的 justify-content：center 规则。 类。 Firefox可以按照预期的任何一种方式工作。

为什么在Chrome中 flex-basis：auto 的行为与Firefox和IE有所不同，如这支笔所示：https://codepen.io/ninja59/pen/GzpOjO

在Chrome中，通过删除 .content 类中的 auto 可获得所需的结果，但这导致页脚在IE中呈现时始终精确地处于100vh。对于长页面，当页面溢出时， .content div中的内容将与页脚重叠。

因此，总结：
仅 IE要求使用flex-basis：自动使页脚按预期工作，并且
仅在Chrome浏览器中，自动设置中断了证明内容：居中；

html,
body {
  height: 100%;
}

.container {
  display: flex;
  flex-direction: column;
  height: inherit;
  overflow: auto;
}

.content {
  flex: 1 0 auto;
}

.contentwrapper {
  height: 100%;
  text-align: center;
}

.middle {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inner {
  width: 320px;
  background-color: red;
  line-height: 100px;
}

footer {
  padding: 1rem;
  background-color: gray;
  text-align: center;
  flex-shrink: 0;
}

<div class="container">
  <div class="content">

    <div class="contentwrapper">
      <div class="middle">
        <div class="inner">
          box
        </div>
      </div>
    </div>

    <footer>
      footer
    </footer>

  </div>
</div>

Answer 1

我认为该Codepen将为您提供帮助。

Example of the FlexBox

您必须更改某些班级。

html,
body {
  height: 100%;
  margin: 0px;
}

.container {  
  height: 100%;
}

.content {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.contentwrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

.middle {
  height: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.inner {
  width: 320px;
  background-color: red;
  line-height: 100px;
}

footer {
  padding: 1rem;
  background-color: gray;
  text-align: center;
  flex-shrink: 0;
}

Also this very good to understand flexbox

chrome中的flex-basis auto

1 个答案: