显示div时居中对齐flexbox在IE11中不起作用答案

【问题标题】：Align in the center when the div is displayed flexbox doesn't work in IE11显示div时居中对齐flexbox在IE11中不起作用
【发布时间】：2019-07-17 11:15:52
【问题描述】：

显示 div 时居中对齐 flexbox 在 IE11 中不起作用。在 Chrome/Firefox 中没问题；

.wrapper {
  align-items: center;
  -ms-flex-align: center;
  -ms-flexbox; display
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%; 
  height: 8.125rem;
  border: 1px solid blue;
  }
  
  
.header {
  align-items: flex-start;
  -ms-flex-align: start;
  -ms-flexbox; display
  display: flex;
  margin: 0.5rem auto 0 auto; 
  border: 1px solid red;
}

.container {
flex-grow: 1;
flex-direction: row;
-ms-flex-align: center;
-ms-flex-direction: row;
max-width: 38.25rem;

}

.bimage {
  margin: 0 1.5rem 0 0; 
}
.nav {
  -ms-flexbox; display
  display: flex;
  flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-grow: 1; 
  -ms-flex-positive: 1;
}
.navbar {
  align-items: flex-start;
  -ms-flex-align: start;
  color: #fff;
  display: flex;
  justify-content: space-between;
  -ms-flex-pack: justify;
  text-transform: uppercase; 
 }
 
.navbar items > * {
  color: inherit;
  margin-right: 0.5rem;
 }
 
.navbar items> *:last-child {
  margin-right: 0; 
  }

.search {
  -ms-flexbox; display
  display: flex;
  align-items: flex-start;
  -ms-flex-align: start;
  margin: 1.5rem 0 1.5rem 0; 
  }

<div class="wrapper">
<div class="header container">
  <div class="bimage">
    <a href="/"><img src="https://via.placeholder.com/50"></a>
  </div>
  <div class="nav">
    <div class="navbar">
      <div class="items">
        <a href="#">Alpha</a>
        <a href="#">Beta</a>
        <a href="#">Gama</a>
        <a href="#">Teta</a>
    </div>
    <div class="items">
        <a href="#">Right Alpha</a>
        <a href="#">Right Beta</a>
    </div>
  </div>
  <div class="search">
    <form>
      <input class="searchinput" placeholder="Search" name="q" >
      <button type="submit" value="Search">
  </form>
  </div>
</div>


     
</div>

【问题讨论】：

似乎您没有为 flexbox 属性使用供应商前缀。你应该这样写：display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; 你可以使用autoprefixer.github.io 添加供应商前缀。
@Shuvo 我在现实中使用供应商前缀，我只是没有在这里添加，因为会很多代码；但我只是将它们添加到 IE 中，以向您展示这不是问题所在。 IE11 - 通常可以在没有前缀的情况下工作

标签： css internet-explorer flexbox

【解决方案1】：

我对 CSS 文件进行了一些更改。请检查答案，

.wrapper {
  align-items: center;
  text-align: center;
  -ms-flex: display;
  display: flex;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  width: 100%;
  height: 8.125rem;
  border: 1px solid blue;
}

.header {
  align-items: flex-start;
  text-align: start;
  -ms-flex: display;
  display: flex;
  margin: 0.5rem auto 0 auto;
  border: 1px solid red;
}

.container {
  flex-grow: 1;
  flex-direction: row;
  text-align: center;
  -ms-flex-direction: row;
  max-width: 38.25rem;
}

.bimage {
  margin: 0 1.5rem 0 0;
}

.nav {
  -ms-flex: display;
  display: flex;
  flex-flow: column nowrap;
  -ms-flex-flow: column nowrap;
  flex-grow: 1;
}

.navbar {
  align-items: flex-start;
  text-align: start;
  color: #fff;
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}

.navbar items>* {
  color: inherit;
  margin-right: 0.5rem;
}

.navbar items>*:last-child {
  margin-right: 0;
}

.search {
  -ms-flex: display;
  display: flex;
  align-items: flex-start;
  text-align: start;
  margin: 1.5rem 0 1.5rem 0;
}

<div class="wrapper">
  <div class="header container">
    <div class="bimage">
      <a href="/"><img src="https://via.placeholder.com/50"></a>
    </div>
    <div class="nav">
      <div class="navbar">
        <div class="items">
          <a href="#">Alpha</a>
          <a href="#">Beta</a>
          <a href="#">Gama</a>
          <a href="#">Teta</a>
        </div>

        <div class="items">
          <a href="#">Right Alpha</a>
          <a href="#">Right Beta</a>
        </div>
      </div>
      <div class="search">
        <form>
          <input class="searchinput" placeholder="Search" name="q">
          <button type="submit" value="Search">
  </form>
  </div>
</div>


     
</div>

【讨论】：