解决移动端水平滚动使用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;
}
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-12-06 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读