问题：

Question

我的导航使用flex-basis和<!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>属性在整个页面上展开。

HTML：

#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;
}

为了使这些元素在整个屏幕上按其宽度延伸，我可以使用以下代码：

flex-growth

最终给了我this result。

但不幸的是，这看起来并不令人愉快 - golden spacer的父级宽度太长，因此我通过专门为此列表项减少main_navigator_l1解决了这个问题，我给了列表项唯一的id {{1 }}

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

问题：

由于某种原因，随着窗口变小，间隔物更靠近右侧的元素，这会影响元素之间的对称性。你可以通过scaling this page看到这个。

如何在不影响对称性的情况下减小flexbox的一个特定元素的大小（在这种情况下为#main_navigator_l1）？

谢谢！

在不影响等差的情况下减少弯曲增长

问题：

0 个答案: