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 ...
随机推荐
- JS操作iframe父级子级元素,jquery自动点击iframe里按钮
在父窗口中操作 选中iframe中的id $(window.frames["ifm"].document).find("#id").attr("val ...
- Qt/C++最新地图组件发布/历时半年重构/同时支持各种地图内核/包括百度高德腾讯天地图
一.前言说明 最近花了半年时间,专门重构了整个地图组件,之前写的比较粗糙,有点为了完成功能而做的,没有考虑太多拓展性和易用性.这套地图自检这几年大量的实际项目和用户使用下来,反馈了不少很好的建议和意见 ...
- Qt/C++控件设计器/属性栏/组态/可导入导出/中文属性/串口网络/拖曳开发
一.功能特点 自动加载插件文件中的所有控件生成列表,默认自带的控件超过120个. 拖曳到画布自动生成对应的控件,所见即所得. 右侧中文属性栏,改变对应的属性立即应用到对应选中控件,直观简洁,非常适合小 ...
- Qt数据库应用15-通用数据库同步
一.前言 数据库同步的主要功能是将本地的数据库记录同步到远程的数据库,其中数据库类型不限,比如本地是sqlite数据库,远程可以是mysql数据库,本地是mysql数据库,远程也可以是postgres ...
- 不为人知的网络编程(十九):能Ping通,TCP就一定能连接和通信吗?
本文由小白debug分享,原题"能 ping 通,TCP 就一定能连通吗?",下文进行了排版和内容优化. 1.引言 平时,我们想要知道,自己的机器到目的机器之间,网络通不通,一般会 ...
- 架构-初识BFF
引言 晚上公司开了一个技术分享会,主要内容就是公司的项目架构,会中讲解了项目整体架构是BFF架构,就是在微服务之上多加了一层. 除此之外,还讲解了DDD设计思想,主要用于各个业务中台,如订单中台.用户 ...
- Spring基础 02 | JdbcTemplate
JdbcTemplate Spring对Jdbc的Api简单封装 开发步骤 1.导入Spring-jdbc.spring-tx坐标 2.创建数据库表和实例 3.创建jdbcTemplate对象 4.执 ...
- UWP 读写文件
List<Pics> pics = new List<Pics>(); for (int i = 0; i < 2000; i++) { pics.Add(new Pic ...
- 分布式数据库NoSQL简介
NoSQL第一部分 一.什么是NoSQL? 问题:12306在开始诞生的前几年,每到重大节假日,经常"瘫痪",直接原因就是集中超负荷的访问量.技术原因是它在此期间所采用的国际著 ...
- python实现网页爬虫示例
用python里面的 requests 与 BeautifulSoup 结合,实现网页爬虫示例. 示例一:抓取中国省份: import requests from bs4 import Beautif ...