对齐内容不起作用 Internet Explorer 11答案

【问题标题】：align-content not working Internet Explorer 11对齐内容不起作用 Internet Explorer 11
【发布时间】：2019-09-20 18:04:26
【问题描述】：

.row {
  background: green;
  color: white;
  margin-top: 20px;
}

.col2 {
  border: 3px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-end;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-6 col1">
      Text
    </div>
    <div class="col-6 col2">
      <p>
      Home
      </p>
      <p>
      Lorem ipsum dolor sit
      </p>
    </div>
  </div>
</div>

jsfiddle：https://jsfiddle.net/ez68c5mr/

align-content: flex-end not working IE 11。我想将 col-2 行向右对齐。 align-items: flex-end 没有做我想做的事。

align-items: flex-end 像这样。

                 Home
Lorem ipsum dolor sit

我想要这个。但是 align-content 在 IE 中不起作用。

           Home
           Lorem ipsum dolor sit

【问题讨论】：

尝试在display: flex;之外添加display: -ms-flexbox。
您可能还需要添加-ms-flex-align: end;，或align-items: flex-end;。
@ChristopherBennett 不工作：/
试试-ms-flex-pack: end 或-ms-flex-line-pack: end ?
是的，我有种感觉，它可能不会。显然 IE 这些年来在 flexbox 方面遇到了各种各样的问题，而且几乎有太多的“修复”要么不起作用，要么不再起作用。

标签： css bootstrap-4 flexbox internet-explorer-11

【解决方案1】：

我在使用 flex-box => 多行时遇到了这个问题，IE11

在为容器添加 align-items: flex-start 之后。问题似乎已解决

【讨论】：

【解决方案2】：

我能找到的最简单的解决方案是将您的内容包装在 <div> 中，并将您的 flexbox 容器设置为 align-items: flex-end。

这里是a community-curated list of flexbox issues and cross-browser workarounds for them（这可能会对您当前的项目有所帮助）。

.row {
  background: green;
  color: white;
  margin-top: 20px;
}

.col2 {
  border: 3px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  /* align-content: flex-end; */
  align-items: flex-end;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col-6 col1">Text</div>
    <div class="col-6 col2">
      <div class="ie-fix">
        <p>Home</p>
        <p>Lorem ipsum dolor sit</p>
      </div>
    </div>
  </div>
</div>

【讨论】：