/ / Presuňte jeden flex-item presunúť sa z flex-kontajnera - html, css, css3, flexbox

Premiestnite jeden flex-item z flex-container - html, css, css3, flexbox

Mám túto situáciu, kde musím urobiť jednuflex-položka v kontajneri flexu zaberá všetok dostupný priestor rodiča (flex nádoby). Preto som presunul iné flex-položky z DOM nastavením pozície na "absolútnu".

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

Trochu menej šialená verzia vyššie:

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

obmedzenia:

  • Nemôžem ju použiť display:none pre tie nechcené flex-položky. V skutočnosti ide o vyskakovacie okná, ktoré sa v predvolenom nastavení nezobrazujú, ale neskôr sa stanú viditeľné na niektorých akciách používateľa.
  • Nemôžem presunúť tieto flex-položky z flex-kontajnera z iných dôvodov.

Existuje čistejšie a elegantnejšie riešenie (možné riešenie na báze flexboxu?), Ako používanie position: absolute s ohľadom na uvedené obmedzenia?

odpovede:

1 pre odpoveď č. 1

Ak môžete použiť height: 0 alebo width: 0, môžete skryť vyskakovacie okná bez position: absolute, display: none alebo odstránenie z kontajnera.


0 pre odpoveď č. 2

Mohli by ste tak urobiť aj naopak: Nechajte všetky ostatné elementy stále byť flex-položkami a urobte to jeden prvok position: absolute s height: 100%, width: 100%

(Musíte pridať position: relative na kontajnerový prvok, aby to fungovalo)

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