弹性布局左右滑动

待我称王封你为后i 2023-01-15 10:26 206阅读 0赞

弹性布局用起来是真的方便，但是今天老板要实现左右滑动的效果，这可为难我了，翻阅资料，终于找到方法了，上代码。

<view class="content">
    		<view v-for=" i in 6" :key="i" class="btn">
    			按钮{
       {i}}
    		</view>
    </view>

.content{
    		display: flex;
    		overflow-x: auto;
    	}
    	.btn {
    		width: 100rpx;
    		background-color: #FBBE75;
    		color: #fff;
    		width: 180rpx;
    		height: 80rpx;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		border-radius: 10rpx;
    		margin-right: 10rpx;
    		/*很重要，禁止子元素的收缩*/
    		flex-shrink: 0;
    	}

最重要的就是父元素要设置overflow-x:auto; 子元素要设置 flex-shrink:0;

这样就可以实现弹性布局左右滑动啦。看看效果。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70]: /images/20221022/e784bc8c600b4096a5bc824c85d57d13.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NoaWNob25nMTIz_size_16_color_FFFFFF_t_70 1]: /images/20221022/2ba51dcc2c0d49fe8f8769e6a7a9108d.png

发表评论取消回复

表情：

评论列表（有 0 条评论，206人围观）

还没有评论，来说两句吧...

相关阅读

相关弹性布局

弹性布局(给父元素设置) 开启弹性布局 dispaly:fix; flew-direction 确定主轴的位置 row 从左往右 row-reverse 从右往

╰半橙微兮°/ 2023年05月31日 07:25/ 0 赞/ 170 阅读

相关弹性布局左右滑动

弹性布局用起来是真的方便，但是今天老板要实现左右滑动的效果，这可为难我了，翻阅资料，终于找到方法了，上代码。 <view class="content">

待我称王封你为后i/ 2023年01月15日 10:26/ 0 赞/ 207 阅读

相关 Flex弹性布局

简介 > Flexible Box的缩写，弹性布局，为盒模型提供最大的灵活性容器任何容器都可以指定Flex布局，设置后，子元素的float,clear,ver

╰+攻爆jí腚メ/ 2023年01月02日 15:28/ 0 赞/ 274 阅读

相关移动端解决左右滑动的纯css布局

移动端解决左右滑动的纯css布局 ![在这里插入图片描述][20210529164745206.gif] <!DOCTYPE html> <html>

àì夳堔傛蜴生んèń/ 2022年10月16日 09:54/ 0 赞/ 184 阅读

相关实现卡片布局，左右滑动

人人影视版特点（需求）：动画：最多可见的这四层，在顶层卡片滑动时，每一层都会位移&放大动画，有种补充到顶层的感觉。动画：松手时，如果未被判定为删除，则会有顶层

谁借莪１个温暖的怀抱￠/ 2022年07月11日 04:27/ 0 赞/ 347 阅读

相关左右滑动swiper

转自：http://blog.csdn.net/xieshunhai/article/details/72830938 .wxml <view class="sw

谁践踏了优雅/ 2022年06月01日 11:58/ 0 赞/ 325 阅读

相关纯JS实现左右滑动布局和滑动

<!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta nam

墨蓝/ 2022年04月18日 04:26/ 0 赞/ 770 阅读

相关弹性布局

弹性布局在制作网页的过程中，布局是我们最重要的一个环节，可以说布局的好坏直接影响到整个网页的成败，布局成，则事半功倍，布局败，则事倍功半。随着移动互联的到来，响应式网站风

灰太狼/ 2021年11月02日 05:50/ 0 赞/ 341 阅读

相关常见布局—弹性布局

在常见的布局中，通常有一部分是固定高度，而其他部分是剩余大小分配的，这种情况我们可以使用弹性布局。说到弹性布局，就得介绍一下css属性中的弹性盒——display:flex

Myth丶恋晨/ 2021年09月18日 15:04/ 0 赞/ 410 阅读

相关 Flex弹性布局

Flex布局一、Flex布局的影响二、父盒子属性 1.display:flex 2.flex-direction

喜欢ヅ旅行/ 2021年09月07日 06:16/ 0 赞/ 515 阅读