оправдать содержание flex-end не работает для IE

Question

Flex-end работает для Chrome и Firefox, но не работает для, т. Е. Выполните следующий код

.flex-container {  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;    flex-direction: column;flex-flow:column;
      justify-content: flex-end;height:100px
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

Answer 1

IE, кажется, выравнивает элементы по-разному, используя justify-content при переполнении . это происходит не только с flex-end, вы столкнетесь с тем же, используя center. Любое значение, которое создаст верхнее переполнение, не будет работать должным образом.

Это также произойдет в направлении строки. Любое свойство, которое создаст левое переполнение, не будет работать.

Примеры, когда выравнивание ничего не делает:

.container {
  display:inline-flex;
  height:50px;
  width:50px;
  margin:50px;
  border:2px solid green;
}
.container span {
  flex-shrink:0;
  width:200%;
  background:red;
}

.alt {
  flex-direction:column;
}

.alt span {
  height:200%;
  width:auto;
}

<div class="container" style="justify-content:flex-end;">
  <span></span>
</div> 

<div class="container" style="justify-content:center;">
  <span></span>
</div>

<div class="container alt" style="justify-content:flex-end;">
  <span></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span></span>
</div>

Я с удивлением говорю это, но кажется, что IE делает хорошие вещи в этих случаях, потому что предотвращает нежелательное переполнение, которое может создать проблемы, подобные описанным в этом вопросе. Центрированный flex-контейнер выходит за пределы вершины а также этот Невозможно прокрутить к вершине гибкого элемента, который переполняет контейнер

Учитывая это, трудно сказать, если это ошибка. Вероятно, это так, и команда IE приняла решение избежать переполнения bad . ¹

---

Здесь говорится, что хак использует некое отрицательное поле, которое позволит вам иметь необходимое поведение в IE:

.flex-container {
  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;
  flex-direction: column;
  flex-flow: column;
  justify-content: flex-end;
  height: 100px
}
.flex-container > div:first-child {
  margin-top:-100vh; /*put a very big margin here*/
}

<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
</div>

Тот же хак, примененный к предыдущим примерам:

.container {
  display:inline-flex;
  height:50px;
  width:50px;
  margin:50px;
  border:2px solid green;
}
.container span {
  flex-shrink:0;
  width:200%;
  background:red;
}

.alt {
  flex-direction:column;
}

.alt span {
  height:200%;
  width:auto;
}

<div class="container" style="justify-content:flex-end;">
  <span style="margin-left:-100%;"></span>
</div> 

<div class="container" style="justify-content:center;">
  <span style="margin: 0 -100%;"></span>
</div>

<div class="container alt" style="justify-content:flex-end;">
  <span style="margin-top:-100%;"></span>
</div>

<div class="container alt" style="justify-content:center;">
  <span style="margin:-100% 0;"></span>
</div>

^{1: В настоящее время у меня нет официальных доказательств.}

Answer 2

Flex и IE - общая проблема.В большинстве случаев это связано с родителем элемента flex.Родитель отсутствует в вопросе, но вы должны сделать что-то вроде этого:

HTML

<div class"flex-wrapper">
    <div class="flex-container">...</div>
</div>

CSS

.flex-wrapper { width: 100%; }

Важно то, что вы используете % и не используете устройство px.

Answer 3

просто попробуйте использовать

  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;

в вашем классе, как это

.wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}

надеюсь, это поможет вам ...

Answer 4

Вы могли бы обратиться к следующему коду, похоже, что flex-end хорошо работает на моей стороне:

<style>
    .flex-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-end;
        background-color: DodgerBlue;
        height: 100%;
        flex-direction: column;
        flex-flow: column;
    }
        .flex-container > div:nth-child(2n+0) {
            background-color: aquamarine;
            width: 300px;
            height: 30px
        }
        .flex-container > div:nth-child(2n+1) {
            background-color:antiquewhite;
            width: 300px;
            height: 30px
        }
</style>
<h1>Flexible Boxes</h1>

<div class="flex-container">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
</div>

<p>Try to resize the browser window.</p>
<p>A container with "flex-wrap: nowrap;" will never wrap its items.</p>
<p><strong>Note:</strong> Flexbox is not supported in Internet Explorer 10 or earlier versions.</p>

Результат как показано ниже:

Answer 5

Попробуйте добавить дополнительную поддержку дисплея:

.flex-container {  display: flex;
  flex-wrap: nowrap;
  background-color: DodgerBlue;    flex-direction: column;flex-flow:column;
      justify-content: flex-end;height:100px
}

.flex-container {  
  /* Add more browser support */
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;

  /* Combined flex-wrap and flex-direction */
  flex-flow: nowrap column;

  /* Add more browser support */
  justify-content: flex-end;
  -webkit-justify-content: flex-end;

  /* This could potentially help with IE10+11 */
  -ms-flex-pack: end;
  justify-content: space-between;  


  height:100px

  background-color: DodgerBlue; 
  height:100px
}

http://the -echoplex.net / flexyboxes / Дает немало советов.