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 ...
随机推荐
- 【XML】学习笔记第二章-dtd
目录 XML-DTD DTD语句 基本声明语句 引用外部DTD DTD元素 四种元素类型 元素定义关键字 修饰符号 DTD中的属性 属性修饰 属性类型 DTD中的实体和符号 符号 坑 XML-DTD ...
- 【C#】【平时作业】习题-11-ADO.NET
选择题 1.下列ASP.NET语句(B)正确地创建了一个与mySQL数据库和服务器的连接. A.SqlConnection con1 = new Connection("Data Sourc ...
- Mac触控板设置以及使用
Mac 触控板体验是非常好的,很多同学甚至直接用触控板代替鼠标操作,但是默认设置中有一些功能是没有开启的,需要手动配置. 本文就来说说 如何更改 Mac 触控板默认设置,让触控板变得更高效. 一.启用 ...
- Web浏览器播放rtsp视频流详细解决方案
1.背景 在当前项目中,需要实现Web端直接播放RTSP视频流.该功能的核心目标是使得用户能够通过浏览器观看来自不同品牌的IPC(Internet Protocol Camera)设备的实时视频流.主 ...
- Qt开源作品25-电池电量控件
一.前言 现在这个时代,智能手机不要太流行,满大街都是,甚至连爷爷奶奶级别的人都会用智能手机,本次要写的控件就是智能手机中的电池电量表示控件,采用纯painter绘制,其实也可以采用贴图,我估计大部分 ...
- TotalUninstaller(Setup.ForcedUninstall.exe)可执行程序和源码的下载
TotalUninstaller(Setup.ForcedUninstall.exe)可执行程序和源码的下载: 链接:https://pan.baidu.com/s/1uBiJ6z1RNVmBEUiF ...
- 安装Visual Studio2015后找不到C++项目模板解决办法
安装Visual Studio2015后找不到C++项目模板解决办法: 方法1:您可以通过修改Visual Studio来完成此操作,并且可以使用以下步骤完成此操作:1.转到"添加或删除程序 ...
- 网络编程入门从未如此简单(二):假如你来设计TCP协议,会怎么做?
本文原题"你管这破玩意儿叫TCP?",由闪客sun分享,转载请联系作者. 1.引言 网络编程能力对于即时通讯技术开发者来说是基本功,而计算机网络又是网络编程的理论根基,因而深刻准确 ...
- CDS标准视图:总计应收款 I_TotalAccountsReceivables
视图名称:总计应收款 I_TotalAccountsReceivables 视图类型:参数 视图代码: 点击查看代码 @AbapCatalog.sqlViewName: 'IFITOTALACCTRB ...
- CentOS扩容boot分区并升级内核
本文作者CVE-柠檬i:https://www.cnblogs.com/CVE-Lemon 前言 由于安装k8s需要升级内核,但我自己的的boot分区只有200M大小,无法安装新内核,所以干脆把swa ...