用flex布局，能否提行后的宽度和上面一样？

bVYrp1?w=713&h=160

使用flex布局的时候，这边换行后，第二行的格子会变的很长，能否让第二行的格子的宽度和第一行一样？

宽度不是定宽，比如下图，如何让下面的E和F的宽度和上面保持一致

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*以下为设置li自动横向排列的样式*/
            #nav
            {
                /*width: 80%;*/
                margin: 0 auto;
                border: 2px solid #00CED1;
            }
            ul,li /*这是关键，去掉ul li默认的margin padding 值*/
            {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            ul /*这是关键*/
            {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

            }
            li
            {
                border: 1px solid;
                width: 300px; /*每个元素的初始化宽度*/
                text-align: center;
                margin-top: 10px;
                margin-bottom: 10px;
                flex:auto;  /*这是关键*/            
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li>AAAA</li>
                <li>BBBB</li>
                <li>CCCC</li>
                <li>DDDD</li>
                <li>EEEE</li>
                <li>FFFF</li>
            </ul>
        </div>
    </body>
</html>

阅读 8.6k

我也想不出完美的办法，只能检测屏幕大小了，在不同的屏幕使用不同的百分比，并尽止grow。代码如下，希望能适合你的情况：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            /*以下为设置li自动横向排列的样式*/
            #nav
            {
                /*width: 80%;*/
                margin: 0 auto;
                border: 2px solid #00CED1;
            }
            ul,li /*这是关键，去掉ul li默认的margin padding 值*/
            {
                margin: 0px;
                padding: 0px;
                list-style: none;
            }
            ul /*这是关键*/
            {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;

            }
            li
            {
                border: 1px solid;
                width: 300px; /*每个元素的初始化宽度*/
                text-align: center;
                margin-top: 10px;
                margin-bottom: 10px;
                box-sizing: border-box;
                flex:auto;  /*这是关键*/            
            }
            @media(min-width: 599px) {
              li {
                flex: 0 1 50%;
              }
            }
            @media(min-width: 899px) {
              li {
                flex: 0 1 33.3%;
              }
            }
            @media(min-width: 1199px) {
              li {
                flex: 0 1 25%;
              }
            }
            @media(min-width: 1499px) {
              li {
                flex: 0 1 20%;
              }
            }
        </style>
    </head>
    <body>
        <div id="nav">
            <ul>
                <li>AAAA</li>
                <li>BBBB</li>
                <li>CCCC</li>
                <li>DDDD</li>
                <li>EEEE</li>
                <li>FFFF</li>
            </ul>
        </div>
    </body>
</html>

用flex布局，能否提行后的宽度和上面一样？

问一个鼠标滚动事件，这种是怎么实现的？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

threejs用octree实现房间内第三人称漫游并且添加了碰撞，人物在碰撞到墙壁的时候不停的弹回，应该怎么修改才能不会疯狂的弹回？

Vue为什么说textarea标签不支持插值表达式的？

在一个前端和position:absolute; position: relative;中的其他标签内容为什么出现异常？

为什么下面的代码内部的 div 其 100% 高度可以跳过上层元素?

微信小程序表单内部可以使用flex吗？