Mam #text
wewnątrz flexu #container
i chcesz całkowicie ustawić coś pod nim:
Jak można nie brać w obliczeniach elastycznego pozycjonowania rodzeństwa?
#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>
Jak zauważysz #text
jest nieco na plus w centrum jest rodzicem i chciałbym go idealnie pionowo wyśrodkowany jeśli to możliwe bez modyfikacji:
Drzewo węzłów
Już napisane właściwości flex (tak jak
justify-content
w przypadku wielokrotności.text
elementy)
Edytować :
Znalazłem kolejne pytanie w tej sprawie, wypróbowałem rozwiązanie bez wyników: Pozycja bezwzględnie umieszczona w pojemniku flex wciąż jest traktowana jako element w IE i Firefox
Wygląda to na względny błąd przeglądarki Firefox i IE (Aktualnie używam przeglądarki Firefox 47, działa ona na Chromium.)
Ostateczna edycja:
Popchnąłem moje badania na ten temat i znalazłem wiele pytań związane z (duplikować) :
Bezwzględne pozycjonowanie zakłócające pozycjonowanie Flexboksa w Firefoksie
Odpowiedź autor: @Oriol Wyklucz element ze stałym pozycjonowaniem z treści-uzasadnienia w układzie flex
I bezpośredni link do Bugzilla.
Odpowiedzi:
4 dla odpowiedzi № 1Jak już odkryłeś, w tym miejscu znajdują się bezwzględnie umieszczone elementy flex justify-content
obliczenia w niektórych przeglądarkach pomimo tego, że powinny zostać usunięte z normalnego przepływu.
Zgodnie z definicją w specyfikacji:
4.1. Absolutnie ustawiony Flex Dzieci
Ponieważ jest poza przepływem, absolutnie pozycjonowane dziecko z flex kontener nie uczestniczy w układzie flex.
W przeglądarkach Firefox i IE11 jednak pozycje pozycjonowane elastycznie działają jak normalne rodzeństwo pod względem zgodności justify-content
.
Oto przykład: działa w obecnych przeglądarkach Chrome, Safari i Edge, ale kończy się niepowodzeniem w Firefoksie i 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>
Chociaż jesteście świadomi obejścia zamieszczonego w innych odpowiedziach, zasugeruję alternatywne podejście na wypadek, gdybyście zostali złapani w Problem XY.
Rozumiem, że chcesz wyrównać do dołu jeden element elastyczny, ale inny element pionowo wyśrodkowany w kontenerze. Cóż, nie potrzebujesz do tego bezwzględnego pozycjonowania.
Możesz użyć niewidocznego pseudoelementu, który działa jak trzeci element flex. Ten element będzie służyć jako przeciwwaga dla elementu DOM wyrównanego do dołu i utrzymywać środek środkowy na środku.
Oto szczegóły:
- Wyśrodkuj i wyrównaj elementy elastyczne
- Metody wyrównywania elementów Flex (patrz pola 62 i 66)
2 dla odpowiedzi nr 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>
Zmień wartość justify-content na center. Mam nadzieję, że teraz działa.