Question

我正在尝试设置菜单栏 following template

我正在尝试使用FlexBox，但我无法弄清楚出了什么问题。这是HTML：

<nav>
<ul>
            <li id="navleft">
                <img src="images/logo.png" alt="logo wikihow">
            </li>

            <li class="navothers">
                <img src="images/contribuye.png" alt="contribuye">
                <p>CONTRIBUYE</p>
            </li>   
            <li class="navothers">
                <img src="images/explora.png" alt="explora">
                <p>EXPLORA</p>
            </li>
            <li class="navothers">
                <img src="images/entrar.png" alt="entrar">
                <p>ENTRAR</p>
            </li>
            <li class="navothers"><img src="images/mensajes.png" alt="mensajes">
                <p>MENSAJES</p>
            </li>   
</ul>
</nav>

我在CSS中应用以下样式：

nav {
     padding: 0 30% 0 30%;
}

nav ul {
    display:flex;
    justify-content:center;
    align-items:center;
    background-color: #93B874;
}

#navleft{
    flex-grow:32;
    flex-shrink:1;
}

#navleft img{
    width: 144px;
    vertical-align:center
}

.navothers{
    flex-grow:1;
    flex-shrink:4;
}

我得到 following result

我的问题是，右侧部分（“navothers”类）中的所有元素都没有相同的宽度！他们只是根据他们的文字大小进行调整。

我可能混合了很多东西，我做错了什么？

Answer 1

#navleft的灵活增长值太大，容器太小。你的物品不能长大，没有足够的空间。试试这个：

CSS：

nav {
    padding: 0 10% 0 10%; // imho it's a strange way to center your nav. Reduced to show you that you're lacking room.
}

nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #93B874;
}

#navleft {
    flex: 2; // You may tune this one but keep room for your other items !
}

#navleft img {
    width: 144px;
    vertical-align: center
}

.navothers {
    flex: 1;
    border: solid 1px #000;
}

HTML：

<nav>
    <ul>
        <li id="navleft">
            <img src="images/logo.png" alt="logo wikihow">
        </li>

        <li class="navothers">
            <img src="images/contribuye.png" alt="contribuye">
            <p>CONTRIBUYE</p>
        </li>
        <li class="navothers">
            <img src="images/explora.png" alt="explora">
            <p>EXPLORA</p>
        </li>
        <li class="navothers">
            <img src="images/entrar.png" alt="entrar">
            <p>ENTRAR</p>
        </li>
        <li class="navothers">
            <img src="images/mensajes.png" alt="mensajes">
            <p>MENSAJES</p>
        </li>
    </ul>
</nav>

<强> https://jsfiddle.net/me7t2hv3/

适应性宽度与flexbox和flex-grow

1 个答案: