не работает выравнивание контента Internet Explorer 11 - PullRequest
Новая
       25

не работает выравнивание контента Internet Explorer 11

0 голосов
/ 02 мая 2019 

.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

Ответы [ 2 ]

1 голос
/ 02 мая 2019

Самое простое решение, которое я смог найти, - это обернуть ваш контент в <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>
0 голосов
/ 13 июня 2019

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

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

...