Question

假设我的导航使用了两个flexbox容器。使用flex-grow属性，导航会拉伸以适应主包装（在这种情况下宽度为100％）。

HTML：

<!DOCTYPE html>
<html lang="en">
    <body>
        <div id="main_navigator">
            <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>
                    <div id="main_navigator_regbox"></div>
                </li>
            </ul>
        </div>
    </body>
</html>

CSS：

body {
    margin: 0;
}
#main_navigator {
    position: fixed;
    display: flex;
    flex-direction: row;
    background-color: black;
    width: 100%;
}
#main_navigator_logo {
    width: 416px;
    height: 120px;
    display: block;
    background-color: white;
}
#main_navigator_r1 {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 0px;
    height: 96px;
    list-style-type: none;
}
#main_navigator_r1 li {
    flex-grow: 1;
    flex-shrink: 1;
}
#main_navigator_r1 li .main_nav_btn {
    color: white;
    display: block;
    height: 100%;
    font-family: "nexa_bold";
    font-size: 0.8em;
    text-decoration: none;
}
#main_navigator_s1 {
    width: 2px;
    height: 30px;
    background-color: #B28039;
}
#main_navigator_regbox {
    background-color: red;
    width: 50px;
    height: 5px;
}

从代码中可以看出，有一个带有flexbox属性的主容器，其中包含徽标（<a>元素）和包含flexbox属性的导航（<ul>元素）。

可以看出，第一个元素的左边距保持不变，因此无论缩放如何，徽标和元素之间的边距（或填充）保持不变，而导航元素之间的其他边距与正视缩放时的视口一起增加。

您可以查看可视化here。

是否可以使导航中的所有元素具有相同的自动边距？

我已经尝试将徽标放在<ul>容器中 - 但由于某些自动调整大小，它消失了（徽标的大小应保持静态，但右边距不应该）。是否可以以特定方式将徽标包装在容器中？

谢谢！

Answer 1

要为第一个元素添加自动边距，导航器必须没有预先设置的填充，并且必须使其内联元素居中。在这种情况下：

#main_navigator_r1 {
    padding:0;
    text-align:center
}

为了保持这些列表元素之间的相同差异，它们必须具有相同的显示属性，在本例中为display: inline-block：

#main_navigator_r1 li {
    display: inline-block;
}

对于具有flexbox显示属性父元素的元素，也可以考虑

flex-basis属性 - 如果flex-basis属性设置为0，则flexbox容器内的所有元素将具有相等的宽度 - 因此它们之间的间距相等。

flex-grow第一个元素

1 个答案: