❤支持一下博主呗啾咪❤

使用 flex 布局宽度自动压缩

<view class="moviesview_box"><view class="movies_box"><view class="movies_item" :wx:for="list" :wx:key="item.id">{{item.text}}</view></view>
</view>

.moviesview_box {width: 750rpx;height: 300rpx;background-color: #03a8f4;float: left;overflow: hidden;.movies_box{width: auto;height: 300rpx;background: #333333;display: flex;flex: 1;justify-content: space-between;align-items: center;.movies_item{width: 200rpx;height: 250rpx;margin: 0 20rpx;background-color: #4CD964;}}
}

 export default {data() {return {list: [{id: 1,text: '1',title: '长津湖之水门桥',duration: '149分钟'},{id: 2,text: '2',title: '这个杀手不太冷',duration: '149分钟'},{id: 3,text: '3',title: '哆啦A梦之铁人军团',duration: '149分钟'},{id: 4,text: '4',title: '熊出没之过年',duration: '149分钟'},{id: 5,text: '5',title: '摆渡人',duration: '149分钟'},{id: 6,text: '6',title: '功夫',duration: '149分钟'},{id: 7,text: '7',title: '逃学威龙',duration: '149分钟'},{id: 8,text: '8',title: '少林足球',duration: '149分钟'},{id: 9,text: '9',title: '拆弹专家2',duration: '149分钟'},{id: 10,text: '10',title: '唐人街探案3',duration: '149分钟'},{id: 11,text: '11',title: '西虹市首富',duration: '149分钟'},{id: 12,text: '12',title: '猿族崛起',duration: '149分钟'},{id: 13,text: '13',title: '法医秦明',duration: '149分钟'},{id: 14,text: '14',title: '灵魂摆渡之黄泉',duration: '149分钟'}]}}}

效果图：

我们可以看到，子元素设置了14个，并且子元素设置的 200rpx 的宽度被压缩了，并没有达到我们想要的效果。那我们应该如何解决呢？

解决方案

在 flex 布局中有一个 flex-shrink 属性，将需要设置宽度的子元素的 flex-shrink 的属性值设置为 0 即可解决。
```
.movies_item{width: 200rpx;height: 250rpx;margin: 0 20rpx;flex-shrink: 0;background-color: #4CD964;
}
```

效果图：

后续还会添加更多关于我在使用 flex 布局的时候遇到的问题，大家的支持就是我最大的动力。

使用 Flex 布局踩过的坑以及如何避免相关推荐

flex布局应用与踩坑
一.预告本文不是一篇入门的文章所有请符合以下条件的战斗人员绕道: 1.初学前端,对前端的传统布局还不是很熟悉的人 2.后端人员对前端不打算深入学习的同学二.开篇 flex布局原本是好几个月前就一直 ...
快应用采坑与flex布局讲解
快应用之flex布局在我们常用的布局中有display + position + float进行布局,但是这些布局或多或少都有些麻烦(虽然我最喜欢用position,哈哈啥都能干).但是由于快应用只 ...
前端页面布局常见问题/已踩过的坑大杂烩
目录一.IE8下[图片加文字]展示时自动换行的问题二.设置了z-index无效三.当文字超出范围时自动补...省略号四.实现垂直居中五.实现无缝十字边框六.Iphone APP Webvi ...
微信小程序（safair浏览器）flex布局中的坑
今天在用微信小程序做flex布局的时候遇到了一些问题. 布局简单来说是这样的,最外层是一个flex布局属性为flex-direction:column的元素.里面有未设置height,并且flex-g ...
关于flex布局在IE浏览器上的坑
最近在项目中,钟情于flex布局来搭架子,感觉确实是挺方便的,但是今天遇到一个挺玄幻的问题,flex-direction 属性在IE中执行力并不好, 代码就不贴出来了,毕竟是公司财产, 情景:并排的表 ...
彻底弄懂flex布局
目前在不考虑IE以及低端安卓机(4.3-)的兼容下,已经可以放心使用flex进行布局了.什么是flex布局以及它的好处,这里就不再赘述. 在这篇文章里,想说说flex布局的属性语法及其细节.那么网上也 ...
修改 framework 代码的经验和踩过的坑
点击打开链接修改 framework 代码的经验和踩过的坑 1 经验源码主要目录结构目录子目录子目录描述 android/frameworks/base core java/com/and ...
html横向排列flex,flex布局示例
作者:水牛01248 几个横排元素在竖直方向上新直能分支调二浏页器朋代说,居中 display: flex; flex-direction: row;//横向排列 align-items: cente ...
谈一谈flex布局使用中碰到的一些问题
起因工作以后由于大量使用到了flex布局而碰到了一些尚不清楚的问题,以及一些有意思的特性,在此写篇博客记录一下. flex三个值的含义众所周知,flex布局所有的属性有两种:一种作用在弹性容器(F ...

使用 Flex 布局踩过的坑以及如何避免

flex布局中的常见问题

❤支持一下博主呗啾咪❤

使用 flex 布局宽度自动压缩

解决方案

使用 Flex 布局踩过的坑以及如何避免相关推荐

最新文章

热门文章