2

I have a navigation that stretches across the whole page by using flex-growth and flex-basis properties.

HTML:

  <!DOCTYPE html>
    <html lang="en">
        <body>
            <div id="main_navigator">
                <div id="main_navigator_upper">          
                    <a id="main_navigator_logo" src="/"></a>
                    <ul id="main_navigator_r1">
                        <li>
                            <a class="main_nav_btn">BTN 1</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 2</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 3</a>
                        </li>
                        <li>
                            <a class="main_nav_btn">BTN 4</a>
                        </li>
                        <li>
                            <div id="main_navigator_s1"></div>
                        </li>
                <li>
                  <ul id="main_navigator_regbox">
                    <li>
                      <p id="regbox_signin">sign in</p>
                    </li>
                    <li id="main_navigator_l1">
                      <div id="main_navigator_regbox_s1"></div>
                    </li>
                    <li>
                      <a id="regbox_signup" href="sign_up">sign up</a>
                    </li>
                  </ul>
                          </li>
                    </ul>
                </div>
            </div>
        </body>
    </html>

In order to make these elements stretch through the whole screen by their width, I can use this code:

#main_navigator_r1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    padding: 0;
    padding-right: 5%;
    text-align: center;
    margin-top: 0px;
    height: 98px;
    list-style-type: none;
}
#main_navigator_r1 li {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

which finally gives me this result.

But unfortunately, this doesn't look very pleasant - golden spacer's parent's width is too long, thus I solved this problem by decreasing flex-growth specifically for this list item, I gave list item its unique id main_navigator_l1.

#main_navigator_r1 li {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}
#main_navigator_l1 {
    flex-grow: 0.1 !important;
}

Problem:

For some reason, as window gets smaller, spacer gets closer to the element on the right side and this affects the symmetry between elements. You can see this by scaling this page.

How can I decrease the size of one specific element of flexbox without affecting symmetry (#main_navigator_l1 in this case)?

Thank you!

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
ShellRox
  • 2,532
  • 6
  • 42
  • 90
  • 1
    With `flex-basis: 0` you are distributing free space on the line *equally* among flex items, regardless of the length of their content. Because the last item has longer content than the first four (buttons), the divider appears to lean right (there's a shorter distance to the text). – Michael Benjamin May 09 '18 at 20:42
  • 1
    What you need for the divider to remain centered is for `flex-basis` to distribute free space on the line *proportionally*. That is done with `flex-basis: auto`. Full details in the duplicate. https://jsfiddle.net/w5pL8fvw/11/ – Michael Benjamin May 09 '18 at 20:45
  • 1
    @Michael_B Heard of `flex-basis: auto` but never thought it would work this way. Thanks a lot! – ShellRox May 09 '18 at 20:59

0 Answers0