Problem z wyśrodkowaniem - Flexbox.

pytanie zadane 20 kwietnia 2020 w HTML i CSS przez Hipolit Roszkowski Obywatel (1,480 p.)

Robiąc nawigację strony spotkałem się z następującym problemem.

Tekst z nazwą strony (Science & Universe) chciałem umieścić po lewej stronie, opcje nawigacji wycentrować a "hamburgera" umieścić po prawej stronie. Jednak nie mogę dojść do tego jak wycentrować nawigację a "hamburgera" umieścić po prawej stronie.

https://codepen.io/Deviee/pen/dyYpVev

Z góry dziękuje za wszelką pomoc. :D

2 odpowiedzi

odpowiedź 20 kwietnia 2020 przez frostify Mądrala (5,640 p.)
wybrane 20 kwietnia 2020 przez Hipolit Roszkowski

Najlepsza

https://codepen.io/frostify/pen/qBOaxgR

komentarz 20 kwietnia 2020 przez Hipolit Roszkowski Obywatel (1,480 p.)

Dziękuję bardzo.

odpowiedź 20 kwietnia 2020 przez mb-dir Mądrala (6,710 p.)

Spróbuj do nav dodać ten kawałek

justify-content: space-around;

o taki efekt Ci chodzi?

Tutaj trochę więcej o właściwości justify-content, a tu i tu trochę więcej o Flexboxie

komentarz 20 kwietnia 2020 przez Hipolit Roszkowski Obywatel (1,480 p.)

Nie do końca, chciałbym aby środkowa nawigacja była dokładnie na samym środku a boczne elementy miały 20 pixeli marginesów od bocznych krawędzi.

komentarz 20 kwietnia 2020 przez mb-dir Mądrala (6,710 p.)

To w takim razie do nav dodaj

justify-content: space-between;

a do bocznych elementów odpowiednio margin-left i margin-right na 20px

komentarz 20 kwietnia 2020 przez Hipolit Roszkowski Obywatel (1,480 p.)

Prawie idealnie. Jedyne co się nie zgadza to że środkowa nawigacja nie przyjmuję idealnie wyśrodkowanej pozycji lecz dobiera dwa takie same marginesy po swoich obu stronach. Więc zamiast być idealnie na środku wychodzi za bardzo do prawej storny. Jak temu zapobiec?