css-解决Flex布局下居中溢出滚动截断问题

css-解决Flex布局下居中溢出滚动截断问题

  • 1.出现的问题
  • 2.解决方法
    • [2.1 Flex 布局下关键字 safe、unsafe](#2.1 Flex 布局下关键字 safe、unsafe)
    • [2.2 使用 margin: auto 替代 justify-content: center](#2.2 使用 margin: auto 替代 justify-content: center)
    • [2.3 额外嵌套一层](#2.3 额外嵌套一层)

1.出现的问题

在页面布局中,我们经常会遇到/使用列表内容水平居中于容器中,一般使用flex布局:

javascript 复制代码
//html
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
    //css
          ul,
      li {
        list-style: none;
        margin: 0;
        padding: 0;
      }

      /* 问题的出现 */
      ul {
        width: 500px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:center;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        background-color: lightcoral;
      }
      li {
        width: 150px;
        height: 200px;
        background-color: lightgrey;
        text-align: center;
        line-height: 200px;
        flex-shrink: 0;
      }

ul和单个li是定宽的,当li数目较少时,页面正常

但是当页面li内容较多时,就会出现问题了

可以看到li的宽度超出了ul容器的宽度且第一个li的显示不完全,这显然不是想要的结果。给ul加个样式overflow: auto;呢:

第一个li还是展示不出来

2.解决方法

2.1 Flex 布局下关键字 safe、unsafe

javascript 复制代码
    ul {
        width: 500px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content:safe center;
        align-items: center;
        gap: 10px;
        padding: 10px 0;
        background-color: lightcoral;
        overflow: auto;
      }
      li {
        width: 150px;
        height: 200px;
        background-color: lightgrey;
        text-align: center;
        line-height: 200px;
        flex-shrink: 0;
      }

2.2 使用 margin: auto 替代 justify-content: center

javascript 复制代码
       ul {
        width: 500px;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        padding: 10px;
        background-color: lightcoral;
        overflow: auto;
      }
      li {
        width: 150px;
        height: 200px;
        background-color: lightgrey;
        text-align: center;
        line-height: 200px;
        flex-shrink: 0;
        margin: auto;
      } 

2.3 额外嵌套一层

javascript 复制代码
     <ul class="g-contaner">
      <ul class="g-wrap">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
      </ul>
    </ul> 
       .g-contaner {
        width: 500px;
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        overflow: auto;
        padding: 10px;
        background-color: lightcoral;
      }

      .g-wrap {
        display: flex;
        gap: 10px;
        max-width: 100%;
      }
      li {
        width: 150px;
        height: 200px;
        background-color: lightgrey;
        text-align: center;
        line-height: 200px;
        flex-shrink: 0;
      } 
    

上面三种方法都可以达到效果

记录一下

相关推荐
江城开朗的豌豆6 分钟前
小程序登录不迷路:一篇文章搞定用户身份验证
前端·javascript·微信小程序
aesthetician11 分钟前
React 19.2.0: 新特性与优化深度解析
前端·javascript·react.js
FIN666826 分钟前
射频技术领域的领航者,昂瑞微IPO即将上会审议
前端·人工智能·前端框架·信息与通信
U.2 SSD35 分钟前
ECharts漏斗图示例
前端·javascript·echarts
江城开朗的豌豆35 分钟前
我的小程序登录优化记:从短信验证到“一键获取”手机号
前端·javascript·微信小程序
excel39 分钟前
Vue Mixin 全解析:概念、使用与源码
前端·javascript·vue.js
IT_陈寒1 小时前
Java性能优化:这5个Spring Boot隐藏技巧让你的应用提速40%
前端·人工智能·后端
勇往直前plus1 小时前
CentOS 7 环境下 RabbitMQ 的部署与 Web 管理界面基本使用指南
前端·docker·centos·rabbitmq
北海-cherish7 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
2501_915909068 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5