flex布局底部居中，不限制宽度，超出加滚动条

最新推荐文章于 2024-07-02 11:33:04 发布

Roottt_

最新推荐文章于 2024-07-02 11:33:04 发布

阅读量377

点赞数 2

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_43896125/article/details/136619393

版权

文章讨论了如何在宽度小于80%时使flex布局居中显示，处理数据过多导致的隐藏问题，同时介绍了bottom_box和bottom_list的CSS样式，包括滚动条的设计。

摘要由CSDN通过智能技术生成

在这里插入图片描述
当宽度小于设定的80%宽度时，flex布局不居中，加上 justify-content: center; 数据多时会有左侧数据被隐藏，可以再设置动态样式加上

<div class="bottom_box">
    <div class="bottom_list">
      <div
        class="bottom_item"
        @click="bottomClick(item.value)"
        :class="{ bottom_item_click: item.value === currentType }"
        v-for="item of bottomList"
        :key="item.value"
      >
        {{ item.label }}
      </div>
    </div>
 </div>

主要是前两个样式

.bottom_box {
  position: absolute;
  bottom: 20px;
  width: 100%;
  // 滚动条的宽度
  ::-webkit-scrollbar {
    width: 6px;
    height: 8px;
  }

  // 滚动条的滑块
  ::-webkit-scrollbar-thumb {
    background-color: #1f62b7;
    border-radius: 3px;
    cursor: pointer;
  }
  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    background: #002553;
    opacity: 0.5;
  }
}
.bottom_list {
  gap: 20px;
  width: 80%;
  margin: 0 auto;
  display: flex;
  white-space: nowrap;
  overflow-x: auto;
  padding-bottom: 10px;
}
.bottom_item {
  background-color: transparent;
  padding: 8px 12px;
  border-radius: 5px;
  border: 1px solid #1f62b7;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
}
.bottom_item_click {
  background-color: #1f62b7;
}