对齐内容不工作 Internet Explorer 11

Question

.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 在 IE 11 中不起作用。我想将 col-2 行向右对齐。 align-items: flex-end 没有做我想做的事。

align-items: flex-end like this.

                 Home
Lorem ipsum dolor sit

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

           Home
           Lorem ipsum dolor sit

Answer 1

我能找到的最简单的解决方案是将您的内容包装在 <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>

Answer 2

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

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

对齐内容不工作 Internet Explorer 11

align-content not working Internet Explorer 11

css

flexbox

internet-explorer-11

bootstrap-4