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 ...
随机推荐
- 【Linux】【专项突破】CentOS下软件安装
目录 rpm yum软件仓库 配置文件 缓存处理 清理缓存 重构缓存 查询包的依赖关系 rpm # 普通下载安装 rpm -ivh 包名 # 更新 rpm -Uvh 包全名 # 查询 rpm -q 包 ...
- pip 安装 Caused by SSLError(SSLError(1, '[SSL: WRONG_VERSION_NUMBER] wrong version number (_ssl.c:1123)'))
1.问题 1.1 问题截取 pip install redis -i https://pypi.tuna.tsinghua.edu.cn/simple Looking in indexes: http ...
- 【转载】Spring Cloud Gateway排错、调试技巧总结
http://www.imooc.com/article/290824 本文总结Spring Cloud Gateway的排错.调试技巧.欢迎留言补充! 第一式:Actuator监控端点 借助Actu ...
- URL中文转换成类似%E6%96%97%E7%A0%B4(url编码)格式
要将汉字转换成编码格式拼接成请求,没怎么搞过,一番查找,最终确定使用C# 里的WebUtility using System.Net; var a = WebUtility.UrlEncode(&qu ...
- [转]E1接口介绍
E1 通道本来设计用来传输电话的,每个 E1(带宽 2.048M)可以传 30 路电话,后来扩大的应用范围,可以用作传网络,串口等不同的业务:E1 是一个基本的传输单元,其最终还是通过光纤来传输的,如 ...
- PHP 安装启用imagick(解决 word press可选的模组imagick未被安装或已被禁用)
本教程仅适用Windows Servier IIS网站服务器. 我的博客使用IIS搭建,相比Linux,相关的教程格外少.因此让以后的小伙伴也能马上解决问题,分享此方法. 首先需要下载php对应版本的 ...
- ArchLinux安装后常见问题的解决
Q:UEFI引导grub-install报错:variables are not support on this system A:进入安装u盘的时候是传统引导模式,传统模式下无法安装UEFI启动,解 ...
- 敏捷开发:如何高效开每日站会(Daily Stand-up Meeting)
介绍 在敏捷开发框架 Scrum 中,每日站会(Daily Stand-up Meeting,又叫 Daily Scrum)是 Sprint 迭代开发中,一个很重要的流程,一个重要的例会.在有限的时间 ...
- pyspider安装使用遇到的坑
一.pip install pyspider 安装出现错误: Command "python setup.py egg_info" failed with error code 1 ...
- cookie和session的详解与区别-copy
会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份,Session通过在服务器端 ...