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。

                 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

2 个答案: