javascript - css display: flex; 问题

问题描述

问 题

问题描述：上图是个导航条，左右两边的各有一块区域宽度是固定的，中间是自适应的
我的愿望：中间那块区域随着菜单的增多，自适应靠近在一起，有点像浏览器那个意思
遇到的问题: 现在菜单少还可以，一多了，中间那块区域就跑出来了
多了就像这样了：

我的代码：

*{
    margin: 0;
    padding: 0;
}
a {
    color: #fff;
    text-decoration: none;
}
ul,
li {
    list-style: none;
}
body {
    background-color: #1e222b;
}
header {
    position: relative;
    width: 100%;
    height: 50px;
    background: #0d1119;
}

header .logo {
    display: block;
    width: 300px;
    height: 50px;
    float: left;
    background-color: blue;
}

div.div_ul {
    position: absolute;
    left: 300px;
    right: 105px;
    margin-right: 0;
    /* background-color: #ddd; */
}

header ul {
    display: flex;
    width: 100%; 
    max-width: 100%;    
    overflow: hidden;
    border-left: 1px solid #272e3a;
    margin-left: 0;
}

header ul li {
    flex: 1;
    height: 50px;
    border-right: 1px solid #272e3a;
    text-align: center;
    line-height: 50px;
    padding: 0 2.34%;
}
header ul li a {
    width: auto;
    margin-top: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

header .headquit {
    float: right;
    width: 105px;
    height: 50px;
    background-color: yellow;
}

html:

 <header class="cb">
    <a class="logo" href="javascript:;">
    </a>
    <div class="div_ul">
        <ul class="headtab">
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
            <li><a class="cur" data-url="/CloudCall/index" href="javascript:void(0);">菜单一</a><span></span></li>
        </ul>
    </div>
    <div class="headquit">
        <a href="javascript:location.reload();"></a>
        <a id="loginOut" data-loginouturl="/Login/Logout" href="javascript:void(0);"></a>
    </div>

解决方案

楼上的方法应该是正确的。
更加简写一点可以写成flex: auto;
其实用到的就是flex-grow和flex-shrink两个属性。
flex-grow是有剩余空间进行扩展，都设置为1时可以全部li等比例扩展。
flex-shrink是空间不足时进行压缩，都设置为1时可以全部li等比例压缩。
flex: auto; 是等于 flex: 1 1 auto;

这篇关于javascript - css display: flex; 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！