css：横向滚动布局-Toy模板网

这篇具有很好参考价值的文章主要介绍了css：横向滚动布局。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

效果：

css：横向滚动布局,css,css,css3,html 文章来源地址https://www.toymoban.com/news/detail-563778.html

实现代码：

<template>
  <div class="index_div">
    <div class="container">
      <div class="flexBox">
        <div class="flex_item" v-for="item in topMenu" :key="item.id">
          <img src="@/assets/image/action/autoRule.png" alt="">
          <div>{{ item.name }}</div>
        </div>
      </div>
      <div class="flexBox">
        <div class="flex_item" v-for="item in bottomMenu" :key="item.id">
          <img src="@/assets/image/action/minMax.png" alt="">
          <div>{{ item.name }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'H5Test',

  data() {
    return {
      topMenu: [{ id: '1-1',name: '广州'}, { id: '1-2',name: '深圳'}, { id: '1-3',name: '北京'}, { id: '1-4',name: '上海'}, { id: '1-5',name: '东莞'}, { id: '1-6',name: '珠海'}, { id: '1-7',name: '肇庆'}],
      bottomMenu: [{ id: '2-1',name: '美食'}, { id: '2-2',name: '行街'}, { id: '2-3',name: '演出'}, { id: '2-4',name: '展览'}, { id: '2-5',name: '打卡'}],
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="less" scoped>
.index_div{
  padding: 10px;
}
.container{
  padding: 20px;
  overflow: hidden;
  overflow-x: scroll;
  border-radius: 20px;
  background: #ecbf94;
}
.flexBox{
  display: inline-flex;
  align-items: center;
  margin-bottom: 20px;
  &:nth-last-child(1){
    margin-bottom: unset
  }
  .flex_item{
    width: 55px;
    height: 55px;
    text-align: center;
    padding: 5px;
    margin-right: 15px;
    border-radius: 10px;
    background: #ffe7cd;
    flex: 0 0 auto; // 等同于 flex: none，默认元素有剩余空间也不放大，空间不足时也不能缩小
    &:nth-last-child(1){
      margin-right: unset;
    }
    img{
      width: 25px;
    }
  }
}
</style>