HTML/CSS - manipulowanie odstępem

Question

Witam serdecznie. Borykam się z pewnym problemem, żeby rozjaśnić sytuację poniżej prezentuję fragment kodu:

    <!-- Header -->
    <header class="page-header">
        <section class="menu-brand">
            <a href="#logo">
                Logo
            </a>
        </section>
        <nav class="menu-links">
            <ul class="links">
                <li>
                    <a href="#label">Label</a>
                </li>
                <li>
                    <a href="#label">Label</a>
                </li>
                <li>
                    <a href="#label">Label</a>
                </li>
            </ul>
        </nav>
    </header>

Nauczyłem się korzystać z flexa, aczkolwiek mój problem polega na tym, że nie jestem w stanie odpowiednio manipulować odstępami, pomiędzy poszczególnymi elementami. Łatwiej będzie, jeśli po prostu pokażę, o jaki efekt mi dokładnie chodzi 

https://assets.hongkiat.com/uploads/psd-website-templates/13-free-website-psd-templates.jpg

Logo oraz nawigacja posiadają zauważalny odstęp od krawędzi, mam problem, żeby uzyskać taki efekt. Flexbox w moim przypadku nie rozwiązuje problemu, mogę wszystko wycentrować, ale później, żeby uzyskać podobny efekt, muszę niestety posiłkować się jakąś absurdalną wielkością marginesów. 

.page-header {
    max-width: 1920px;
    height: 82px;
    
    display: flex;
    justify-content: center;
    align-items: center;
}
 

 

Moje ustawienie page-header.

Answer 1

Zobacz na menu na tej stronie: https://radek024.github.io/blog/. Jeżeli elementowi podasz .blog-title większą wartość dla flex to będziesz miał odstęp - a wysokość i tak i tak musisz ustalić.

Comments

Pobawiłem się Flexem i znalazłem rozwiązanie. Mógłbyś bardziej rozwinąć kwestię, jeśli chodzi o przypisywanie wartości do Flexa? 

Poniżej fragment mojego kodu w CSS: 

https://scontent-frt3-2.xx.fbcdn.net/v/t35.0-12/s2048x2048/25383439_722545184619833_510333075_o.jpg?oh=329ac5b02b55eae1f3769e3057fbed67&oe=5A33C9A0

Ustawienie jakiejkolwiek wartości: "Flex" niczego u mnie nie zmieniło, dopiero space-around rozwiązało mój problem. 

---

OK, myślałem że zależy Ci na rozmieszczenie elementów od siebie - i tutaj chodziło mi o menu samo w sobie oraz logo. jusitfy-content rzeczywiście zadziała, ale wtedy odległość dotyczy każdego z elementów, Natomiast flex działa na zasadzie proporcji.

Uznajmy że mamy dwa elementy: .logo oraz .menu, które znajdują się w .page-nav. Dla .page-nav nadajemy display: flex. Następnie dla elementów potomnych możemy nadać wartość flex. Jeżeli nadamy .logo właściwość flex:3, a .page-nav flex: 4 to wtedy zajmą one miejsce w stosunku 3:4. Na tym polega flex :P

Answer 2

Ja jak nie mogę dojść do ładu z rozmieszczeniem elementów, to posiłkuję się czasem dodatkowymi divami. Robię sobie najpierw przykładowe kolorowe (żeby były widoczne) divy dodatkowe, które następnie odpowiednio ustawiam, i dopiero do tych divów sobie wrzucam dalsze elementy układanki i ewentualnie na koniec wyrzucam im kolory i dodatkowo ustawiam im pozostałe parametry jeśli zachodzi potrzeba.