Po ustawieniu szerokości kontenera justify-content: center nie centruje jego zawartości. Dlaczego?

pytanie zadane 24 kwietnia 2021 w HTML i CSS przez rain.deer Początkujący (430 p.)

Hej,

mam dziwny problem z flexboxem: po tym, jak ustawiam jakąś szerokość kontenerowi (np. 80vw) i piszę: justify-content: center, zawartość kontenera się nie wyśrodkowuje, jest przesunięta bardziej do lewej strony. Co robię źle?

https://codepen.io/raindeer84/pen/mdRaLjw

1 odpowiedź

odpowiedź 24 kwietnia 2021 przez Wiciorny Ekspert (269,710 p.)

A czytałeś co robi justify-content ? Wyśrodkowuje względem PRZEGLĄDARKI... dlatego :) względem elementu który jest flexem w zakresie kontenera.
Więc co innego jest u CIebie traktowane jako kontener główny, sprawdź który rodzic względem właściwości jest traktowany

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container,

komentarz 24 kwietnia 2021 przez rain.deer Początkujący (430 p.)

Wydawało mi się, że względem kontenera. Ale zrozumienie tego nadal mi nie pomaga - bo jeśli ustawię szerokość kontenera na np. 80% to on zasadniczo (chyba że się mylę), powinien również być wycentrowany względem przeglądarki?
Co powinnam zatem zrobić, żeby uzyskać poprawny efekt wycentrowania zawartości kontenera?

komentarz 24 kwietnia 2021 przez Wiciorny Ekspert (269,710 p.)

wzdłuż głównej osi kontenera elastycznego oraz osi wewnętrznej kontenera siatki.
Co jest twoim kontenerem flex?

komentarz 24 kwietnia 2021 przez rain.deer Początkujący (430 p.)

Są dwa kontenery: body, na którym jest flex-direction:column (bo .attribution ma być pod divami) i section z divami, na której jest flex-direction:row

Chciałabym, żeby section była wycentrowana (w pionie i poziomie) względem okna przeglądarki, czyli body. A zamiast pośrodku, section jest u góry okna i przesunięta w lewo. Niestety nie ogarniam jeszcze dobrze flexboxa (chociaż ćwiczyłam ).