用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>

回答

編輯回答

拽很帥

如果格子是定寬的, 給格子設置一個寬度,父級
display: flex;
flex-wrap: wrap;
換行不換行寬度都一樣

2018年3月15日 08:00

編輯回答

敢試

我也想不出完美的辦法，只能檢測屏幕大小了，在不同的屏幕使用不同的百分比，并盡止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>

2017年5月3日 00:15