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

ฅQSω[*邱╭

已于 2024-08-19 10:40:43 修改

阅读量992

点赞数 7

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css 前端

于 2024-03-05 17:39:47 首次发布

本文链接：https://blog.csdn.net/qq_45030898/article/details/136342149

css 专栏收录该内容

14 篇文章

订阅专栏

本文介绍了解决Flex布局下居中内容因滚动而截断的问题。通过使用safe关键字、margin:auto及额外嵌套一层的方法，有效避免内容被截断，确保滚动条能够完整显示所有元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.出现的问题

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

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

    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

       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 额外嵌套一层

     <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;
      }