align-content не работает Internet Explorer 11

.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

css flexbox bootstrap-4 internet-explorer-11
person tom clarck    schedule 02.05.2019    source источник
comment
Попробуйте добавить display: -ms-flexbox в дополнение к display: flex;.   -  person Christopher Bennett    schedule 02.05.2019
comment
Возможно, вам также придется добавить -ms-flex-align: end; или align-items: flex-end;.   -  person Christopher Bennett    schedule 02.05.2019
comment
@ChristopherBennett не работает: /   -  person tom clarck    schedule 02.05.2019
comment
Попробовать -ms-flex-pack: end или -ms-flex-line-pack: end?   -  person Jake    schedule 02.05.2019
comment
Да, у меня было такое чувство, что может и не быть. По всей видимости, на протяжении многих лет у IE были всевозможные проблемы с flexbox, и есть почти слишком много исправлений, которые либо не работают, либо больше не работают.   -  person Christopher Bennett    schedule 02.05.2019

Ответы (2)


arrow_upward
1
arrow_downward

Самым простым решением, которое я смог найти, было обернуть ваш контент в <div> и установить для контейнера flexbox значение align-items: flex-end.

Вот список проблем с Flexbox и кросс-браузерных обходных путей, который может помочь вам в ваш текущий проект).

.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>

person Jake    schedule 02.05.2019

arrow_upward
0
arrow_downward

Я встречал это при использовании flex-box => несколько строк, IE11

после добавления align-items: flex-start для контейнера. проблема кажется исправленной

person gy134340    schedule 13.06.2019