Problem z wyśrodkowaniem - Flexbox.

Question

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

Answer 1

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

Comments

Dziękuję bardzo.

Answer 2

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

Comments

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.

---

To w takim razie do nav dodaj

justify-content: space-between;

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

---

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?

---

Spróbuj w #options > p zamiast margin-left: 10px ustawić margin: 0 5px(0 z góry i dołu, a 5px z lewej i prawej)