flex布局之flex-shrink
当指定view为flex布局后,给子元素定义width是不起效果的。
原因:定义为flex布局元素的子元素,自动获得了flex-shrink的属性,这个属性是什么意思呢?就是告诉子元素当父元素宽度不够用时,自己调整自己所占的宽度比,这个flex-shrink设置为1时,表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时,表示大家都不缩小适应。
所以,倘若给父元素设置了flex布局后,若要其子元素的width有效果,必须给子元素设置flex-shrink为0。
当然,还有一种办法,就是给需要设置width元素的外面再嵌套一层view。这样一来,设置width的元素就变成了子子元素,自然,也就不用受这种规矩的约束了。
flex布局之flex-shrink的更多相关文章
- flex布局中flex属性运用在随机发红包的算法上
flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...
- 重新总结flex布局(flex,flex-direction,justify-content,align-items,flex-wrap,align-self)
1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...
- 微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- 关于基本布局之——Flex布局
Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置 ...
- [flex布局]-flex教程
简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...
- 微信小程序开发:Flex布局
微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
随机推荐
- 【人工智能】【Python】Anacond基础操作
# 001.在 Anaconda 中使用 Conda 管理 Python 环境 工具:Anaconda Prompt(Anaconda)| 请使用管理员权限运行 更新Anaconda conda up ...
- iaas,saas,paas,daas区别:
iaas,saas,paas,daas区别: Iaas(Infrastructure as a server):基础设施即服务,是基础层.PaaS(Platform as a Server):平台即服 ...
- mybatis-plus 使用In查询
第一种在Dao接口中自定义SQL查询,拼接xml字符串 UserDaoMapper.java @Select("<script>" +"select * fr ...
- error: undefined reference to `cv::imread(cv::String const&, int)' 解决方法
方法1 原文链接:https://blog.csdn.net/WhiteLiu/article/details/72901520 编译时出现下列错误: undefined reference to ' ...
- 阿里IM技术分享(十):深度揭密钉钉后端架构的单元化演进之路
本文由钉钉技术专家啸台.万泓分享,为了获得更好的阅读效果,本文已对内容进行少修订和重新排版. 1.引言 钉钉后端架构的单元化工作从2018年开始到今年,已经是第五个年头了.五年的时间,钉钉单元化迭代了 ...
- WPF 取消在触屏上点击按下不松开会出现矩形背景的效果
加个属性: btn.SetValue(Stylus.IsPressAndHoldEnabledProperty,false); 或者在样式里设置: <Style x:Key="MyB ...
- MySQL 开发规范
建表规约 1.[强制]每张表必须设置一个主键ID,并且这个主键ID要自增(在满足需要的情况下尽量短),除非是分库分表 理解:由于InnoDB存储引擎决定了需要有一个主键,而且这个主键ID是自增的话可以 ...
- kubernetes 使用ceph实现动态持久卷存储
k8s使用ceph存储 ceph提供底层存储功能,cephfs方式支持k8s的pv的3种访问模式ReadWriteOnce,ReadOnlyMany ,ReadWriteMany ,RBD支 ...
- day04-数组
Java数组 [ 任务列表 ] 1.数组 2.二维数组 3.其他 --------------------------------------------------------- 1.数组 数组:存 ...
- 【译】融入人工智能的 eShop – 全面的智能应用示例
原文 | Jeremy Likness 翻译 | 郑子铭 人工智能 (AI) 是一种强大的工具,它可以增强您的应用程序,提供更好的个性化定制体验,满足客户的独特需求,同时提高内部运营的质量和效率.虽然 ...