当前位置：文江博客话题详情

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

发布于 2022-09-07 22:08:47 字数 1715 浏览 17 评论 0

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>

收藏 0

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

评论（3）

涫野音 2022-09-14 22:08:47

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

蘑菇王子 2022-09-14 22:08:47

如果格子是定宽的, 给格子设置一个宽度,父级
display: flex;
flex-wrap: wrap;
换行不换行宽度都一样

零時差 2022-09-14 22:08:47

flex 是一维的布局。
二维布局，建议使用grid

~没有更多了~

关于作者

暂无简介

0 文章

0 评论

23 人气

关注发私信

相关话题

热门标签

操作系统程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端

推荐作者

已经忘了多久

文章 0 评论 0

15867725375

文章 0 评论 0

LonelySnow

文章 0 评论 0

走过海棠暮

文章 0 评论 0

轻许诺言

文章 0 评论 0

信馬由缰

文章 0 评论 0

友情链接

我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的隐私政策了解更多相关信息。单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。

原文