Io ho un #text
all'interno di un flex #container
e voglio posizionare assolutamente qualcosa al di sotto di esso:
Come non potrebbe essere preso nel calcolo per il posizionamento flessibile dei fratelli?
#container{
display: flex;
align-items: center;
justify-content: space-around;
flex-direction: column;
position: relative;
width: 95vw;
height: 95vh;
border: 1px solid black
}
#text{
font-size: 13px;
width: 50vw;
text-align: justify;
}
#absolute{
position: absolute;
bottom: 5px;
left: calc(47.5vw - 25px);
width: 50px;
text-align: center;
color: red;
}
<div id="container">
<div id="text">
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
</div>
<div id="absolute">
Absolutly
</div>
</div>
Come noterai il #text
è leggermente rialzato al centro di è genitore e mi piacerebbe perfettamente centrato verticalmente se possibile senza modificare:
L'albero dei nodi
Le proprietà flex già scritte (come
justify-content
in caso di multipli.text
elementi)
Modificare :
Ho trovato un'altra domanda al riguardo, ho provato la soluzione senza risultati: L'elemento posizionato in modo assoluto in un contenitore flessibile viene comunque considerato come elemento in IE e Firefox
Sembra essere relativo un bug di Firefox e IE (Sto attualmente eseguendo Firefox 47, funziona su Chromium.)
Modifica finale:
Ho spinto la mia ricerca sull'argomento e ho trovato molte domande relazionato (duplicare) :
Posizionamento assoluto che interferisce con il posizionamento della flexbox in Firefox
Elemento flex assolutamente posizionato non rimosso dal flusso normale in Firefox
Flexbox in Firefox: gli articoli non sono allineati correttamente
Risposta da @Oriol Escludi elementi con posizionamento fisso da giustificare-contenuto nel layout flessibile
E un link diretto a Bugzilla.
risposte:
4 per risposta № 1Come hai scoperto, un elemento flessibile in posizione assoluta è un fattore in cui entrare justify-content
calcoli in alcuni browser, nonostante debba essere rimosso dal flusso normale.
Come definito nella specifica:
4.1. Flex assolutamente posizionato Bambini
Poiché è fuori flusso, un bambino assolutamente posizionato di un flex il contenitore non partecipa al layout flessibile.
In Firefox e IE11, tuttavia, gli elementi flessibili posizionati in modo assoluto agiscono come fratelli normali in termini di allineamento con justify-content
.
Ecco un esempio: funziona negli attuali Chrome, Safari e Edge, ma non riesce in Firefox e IE11.
flex-container {
display: flex;
justify-content: space-between;
position: relative;
background-color: skyblue;
height: 100px;
}
flex-item {
background: lightgreen;
width: 100px;
}
[abspos] {
position: absolute;
z-index: -1;
}
<flex-container>
<flex-item>item 1</flex-item>
<flex-item>item 2</flex-item>
<flex-item abspos>item 3</flex-item>
</flex-container>
Sebbene tu sia a conoscenza delle soluzioni alternative pubblicate in altre risposte, ti suggerirò un approccio alternativo nel caso in cui ti trovi in un Problema XY.
La mia comprensione è che si desidera allineare in basso un articolo flessibile, ma disporre di un altro elemento centrato verticalmente nel contenitore. Bene, non hai necessariamente bisogno di un posizionamento assoluto per questo.
Puoi usare uno pseudoelemento invisibile che funge da terzo elemento flessibile. Questo oggetto servirà da contrappeso all'elemento DOM allineato in basso e manterrà centrato l'oggetto centrale.
Ecco i dettagli:
- Elementi flettenti centrali e allineati in basso
- Metodi per allineare gli oggetti Flex (vedi riquadri 62 e 66)
2 per risposta № 2
#container{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
width: 95vw;
height: 95vh;
border: 1px solid black
}
#text{
font-size: 13px;
width: 50vw;
text-align: justify;
}
#absolute{
position: absolute;
bottom: 5px;
left: calc(47.5vw - 25px);
width: 50px;
text-align: center;
color: red;
}
<div id="container">
<div id="text">
"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga."
</div>
<div id="absolute">
Absolutly
</div>
</div>
Cambia il valore di justify-content al centro. Spero che funzioni ora.