zoukankan      html  css  js  c++  java
  • 解决移动端水平滚动使用justify-content显示不全问题

    今天做移动端页面遇到一个坑,我需要实现的效果是这样的

    由于选项的个数是不一定的,如果很少的话不会有横向滚动,是需要居中的

    自然而然的是这么写的

          .father {
                display:flex;
                justify-content: center;
                overflow-x: auto;
                margin: 0 30px;
                 .child {
                   display: flex;
                   flex-direction: column;
                   align-items: center;     
                 }
           }
    
    

    结果会发现第一个元素是展示不全的,

    如果把father里的justify-content: center;换成justify-content: space-between;或者justify-content: left; 是可以的,但是当只展示两三个选项时就会间距过大。而我们需要选项过少的时候是center效果,多了则显示全并能滚动。
    想过对第一个选项的css单独处理,但是还要判断选项个数,其实和自己试出来的页面能展示多少个选项不滚动没区别。不想写js和复杂的css,尝试了很多次,最终发现在father外面再包一层div给他justify-content: center;就可以了,搜了半天也没搜到答案,真是个坑,
    注意父元素不能再加justify-content: center;代码如下,

         <div v-if="list.length > 0" class="type-scroll">
          <div class="father" v-if="activeLeft">
            <div
              class="child"
              v-for="(item, index) in list.slice(0, 10)"
              :key="index"
              @click="lookImg(item, index)"
            >
              <img
                v-if="item.icon"
                class="img"
                :class="{ 'icon-active': iconIndex === index }"
                :src="getSrc(item.icon)"
                alt
              />
              <div
                v-if="item.lang"
                class="name"
                :class="{ 'name-active': iconIndex === index }"
              >
                {{ $t(item.lang) }}
              </div>
            </div>
          </div>
         </div>  
    

    css如下

          .type-scroll {
            display: flex; // 关键就是这两行了
            justify-content: center; // 关键就是这两行了
                .father {
                     display: flex;
                    overflow-x: auto;
                    margin: 0 vw(30);
                      .child {
                         display: flex;
                         flex-direction: column;
                         align-items: center;    
                      }
                }
            }
    
  • 相关阅读:
    取出html中指定id的元素的内容
    VisualStudio使用GIT
    HTTP 错误 404.2
    ECMA-262,第 5 版 最新 JavaScript 规范
    JavaScript 中 Object ,Prototype 相关的属性和方法
    JavaScript 函数大全
    jquery.inputmask 输入框input输入内容格式限制插件
    ASP.NET MVC Model验证
    Java:Maven依赖包下载
    myeclipse使用maven教程
  • 原文地址:https://www.cnblogs.com/wuyuchao/p/14093104.html
Copyright © 2011-2022 走看看