chrome中的flex-basis auto

时间:2019-01-24 21:17:19

标签: css google-chrome internet-explorer flexbox

我很难让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>

1 个答案:

答案 0 :(得分:0)

我认为该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