/ / Verschiebe ein Flex-Item aus flex-container - html, css, css3, flexbox

Verschiebe einen Flex-Item-Auszug aus dem Flex-Container - html, css, css3, flexbox

Ich habe diese Situation, wo ich eine machen mussDas Flex-Element in einem Flex-Container nimmt den gesamten verfügbaren Platz des Elternteils (des Flex-Containers) ein. Daher habe ich andere Flex-Elemente aus dem DOM entfernt, indem ich die Position auf "absolut" gestellt habe.

<div style="display:flex; flex-direction:column">
<div style="flex:1 1 auto">Flex Item which should take it all...</div>
<div style="position:absolute">Not really a Flex Item 1</div>
<div style="position:absolute">Not really a Flex Item 1</div>
<div style="position:absolute">Not really a Flex Item 2</div>
</div>

Eine etwas weniger hacky Version von oben:

<div style="display:flex; flex-direction:column">
<div style="flex:1 1 auto">Flex Item which should take it all...</div>
<div style="position:absolute">
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 2</div>
</div>
</div>

Einschränkungen:

  • Ich kann nicht benutzen display:none für diese unerwünschten Flex-Items. Sie sind eigentlich Pop-Ups, die standardmäßig nicht sichtbar sind, aber später bei einigen Benutzeraktionen sichtbar werden.
  • Ich kann diese Flex-Gegenstände aus anderen Gründen nicht aus dem Flex-Container bewegen.

Gibt es eine sauberere und elegantere Lösung (möglich eine Flexbox basierte Lösung?) Als die Verwendung der position: absolute die genannten Einschränkungen beachten?

Antworten:

1 für die Antwort № 1

Wenn Sie es benutzen können height: 0 oder width: 0, Sie können die Pop-ups ohne ausblenden position: absolute, display: none oder sie aus dem Container entfernen.


0 für die Antwort № 2

Du könntest es auch anders herum tun: Lass alle anderen Elemente noch Flex-Items sein und mach dieses eine Element position: absolute mit height: 100%, width: 100%

(Sie müssen hinzufügen position: relative zu dem Containerelement, damit dies funktioniert)

.x {
background: red;
position: relative;
}
.y {
background: green;
position: absolute;
width: 100%;
height: 100%;
}
<div style="display:flex; flex-direction:column" class="x">
<div style="flex:1 1 auto" class="y">Flex Item which should take it all...</div>
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 1</div>
<div>Not really a Flex Item 2</div>
</div>