wake-up-neo.com

Der absolut positionierte Flexartikel wird im IE11 nicht aus dem normalen Fluss entfernt

Wir haben zwei Divs mit Inhalt und ein drittes Div, das einen Hintergrund mit absoluter Position darstellt.

Container ist eine Flexbox.

Alles funktioniert gut in Chrome und Safari, aber Firefox und IE11 berücksichtigt das absolut positionierte div und verteilt den Abstand zwischen den divs, so wie es 3 divs in einer Reihe gibt.

 enter image description here

Ich habe ein jsfiddle-Beispiel gemacht. Gibt es eine Möglichkeit, diesen Fehler zu beheben? https://jsfiddle.net/s18do03e/2/

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>

27

Dies geschieht, weil justify-content: space-between; Elemente gleichmäßig verteilen. Das erste Element am Anfang, das letzte am Ende. Also einfach <div class="bg">Background</div> zwischen <div class="c1">Content 1</div> und <div class="c2">Content 2</div>_. so was 

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>

</div>

Den Grund finden Sie unter https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

13
Guru

UPDATE: Dieses Problem wurde in Firefox behoben (ab Version 52 vom März 2017). Das Problem besteht weiterhin in IE11.


Wie Sie in der Frage geschrieben haben:

Firefox berechnet das absolut positionierte Div und verteilt den Abstand zwischen den Divs, so wie es 3 Divs in einer Reihe gibt.

Firefox betrachtet das dritte Div (.bg), das absolut positioniert ist, ein in-flow flex-Element und berücksichtigt es in seiner space-between-Berechnung. (IE11 tut dies auch; Chrome und Edge ignorieren es.)

Natürlich entspricht dies nicht der aktuellen Flexbox-Spezifikation:

4.1. Absolut positionierte Flex-Kinder

Da es aus dem Fluss ist, ist ein absolut positioniertes Kind eines Flex Container nimmt nicht am Flex-Layout teil.

Hier sind einige Problemumgehungen:

Warum nicht das absolut positionierte div zwischen den beiden anderen verschieben?

An Stelle von:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="c2">Content 2</div>
    <div class="bg">Background</div>
</div>

Versuche dies:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="bg">Background</div>
    <div class="c2">Content 2</div>
</div>

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="bg">Background</div>
  <div class="c2">Content 2</div>
</div>

ODER ... .bg aus dem Flex-Container entfernen:

<div class="container">
    <div class="c1">Content 1</div>
    <div class="c2">Content 2</div>
</div>
<div class="bg">Background</div>

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
</div>
<div class="bg">Background</div>

ODER ... verwenden Sie die flex order-Eigenschaft, um die flex-Elemente neu anzuordnen.

Fügen Sie dies Ihrem Code hinzu:

.c2 { order: 1; }

div.container {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 300px;
  justify-content: space-between;
  width: 100%;
  outline: 1px solid;
}
div.c1 {
  background: #aaeecc;
  width: 100px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
}
div.c2 {
  background: #cceeaa;
  width: 200px;
  position: relative;
  z-index: 50;
  top: 20px;
  display: flex;
  order: 1;
}
div.bg {
  background: #ccc;
  width: 100%;
  height: 100%;
  z-index: 0;
  left: 0px;
  top: 0px;
  position: absolute;
  display: flex;
}
<div class="container">
  <div class="c1">Content 1</div>
  <div class="c2">Content 2</div>
  <div class="bg">Background</div>
</div>

32
Michael_B

Manchmal ist es nicht möglich, Dinge neu zu ordnen, zum Beispiel bei Verwendung von ::before und ::after. In diesen Fällen können Sie die Elemente manuell order eingeben.

In Ihrem Fall müssten Sie Folgendes tun:

.c1 {
  order: -1;
}
.c2 {
  order: 10;
}

Die order-Eigenschaft ist Teil der flex-Spezifikation und ermöglicht die Neuanordnung von Flex-Elementen ( reference bei MDN ). Es ist sehr praktisch für mehrere Zwecke, dies inklusive.

Ich habe -1 verwendet, da es sich um einen Ordinalwert handelt. Wenn Sie den Wert auf eine negative Zahl setzen, wird sichergestellt, dass alle anderen Standardwerte vorangestellt werden und Sie den Wert für ::before nicht angeben müssen. Aus demselben Grund stellt die Verwendung von 10 sicher, dass das zweite div als letztes angezeigt wird, auch wenn Sie dem Container eine Reihe von Elementen hinzufügen. Sie können das auf 100 oder was auch immer erhöhen.

Trotzdem scheint das Verhalten von Firefox nicht intuitiv zu sein. position: absolute entfernt normalerweise das Element für den üblichen dom-Fluss, und ich würde erwarten, dass dieses Element ebenso wie in Safari und Chrome aus dem flex-Fluss entfernt wird. Ich bin nicht sicher, ob die Angaben dies klarstellen.

5

Als Alternative können Sie die flex -Eigenschaft in der Inhaltsauswahl verwenden:

    div.c1 {
      background: #aaeecc;
      width: 100px;
      position: relative;
      z-index: 50; top: 20px;
      display: flex;

      flex: 1; /* add this */
    }

Dadurch wird das Flex-Wachstum festgelegt. Es ist vielleicht nicht genau das, was Sie brauchen, aber vielleicht hilft es jemand anderem, der die divs des Inhalts nicht neu ordnen oder aus dem Flex-Wrapper herausnehmen kann.

Hier ist die Demo: https://jsfiddle.net/s18do03e/14/

0
Constantin Stan