当指定view为flex布局后,给子元素定义width是不起效果的。

原因:定义为flex布局元素的子元素,自动获得了flex-shrink的属性,这个属性是什么意思呢?就是告诉子元素当父元素宽度不够用时,自己调整自己所占的宽度比,这个flex-shrink设置为1时,表示所有子元素大家同时缩小来适应总宽度。当flex-shrink设置为0时,表示大家都不缩小适应。

所以,倘若给父元素设置了flex布局后,若要其子元素的width有效果,必须给子元素设置flex-shrink为0。

当然,还有一种办法,就是给需要设置width元素的外面再嵌套一层view。这样一来,设置width的元素就变成了子子元素,自然,也就不用受这种规矩的约束了。

flex布局之flex-shrink的更多相关文章

  1. flex布局中flex属性运用在随机发红包的算法上

    flex布局是现在前端基本上都会运用的一种布局,基本上用到比较多的是父元素设置display:flex,两个子元素,一个设置固定宽度,另一个设置为flex:1(这里都指flex-direction为r ...

  2. 重新总结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 ...

  3. 微信小程序开发之搞懂flex布局2——flex container

    容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...

  4. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  5. CSS Flex布局整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  6. CSS Flex布局属性整理

    Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...

  7. 关于基本布局之——Flex布局

    Flex布局 1.Flex为"Flexible Box"的简称,即为弹性布局,可作用于任何容器上.给div这类块状元素元素设置display:flex或者给span这类内联元素设置 ...

  8. [flex布局]-flex教程

    简介:2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局是什 ...

  9. 微信小程序开发:Flex布局

    微信小程序页面布局方式采用的是Flex布局.Flex布局,是W3c在2009年提出的一种新的方案,可以简便,完整,响应式的实现各种页面布局.Flex布局提供了元素在容器中的对齐,方向以及顺序,甚至他们 ...

  10. 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)

    实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...

随机推荐

  1. 巧用mask属性创建一个纯CSS图标库

    说明 mask 是CSS中的一个属性,它允许开发者在元素上设置图像作为遮罩层.这个属性的强大之处,在于它可以接受多种类型的值,包括关键字值.图像值.渐变色,甚至可以设置多个属性值. SVG(Scala ...

  2. 人工生命(AL:Artificial life)兰顿蚂蚁多版本代码html\go\php\python\java

    背景介绍 人工生命(AL:Artificial life)这一概念由美国计算机科学家.人工生命领域创始人之一克里斯托弗・盖尔・兰顿(Christopher G. Langton)提出.1986 年,兰 ...

  3. Qt/C++音视频开发68-检查是否含有B帧/转码推流/拉流显示/监控拉流推流/海康大华宇视监控

    一.前言 为什么需要判断视频文件是否含有B帧,这个在推流的时候很容易遇到这个问题,一般来说,没有B帧的视频文件,解码后的数据帧pts和dts都是顺序递增的,而有B帧的则未必,可能有些需要先解码后面显示 ...

  4. Qt音视频开发42-人脸识别客户端

    一.前言 人脸识别客户端程序,不需要和人脸识别相关的库在一起,而是通过协议通信来和人脸识别服务端通信交互,人脸识别客户端和服务端程序框架,主要是为了提供一套通用的框架,按照定好的协议,实现人脸识别的相 ...

  5. Qt编写安防视频监控系统31-onvif设备搜索

    一.前言 做视频监控系统,绕不过onvif这玩意,这玩意主要就是为了统一一个大概的标准,能够对各个厂家的监控设备进行常用的一些操作,比如搜索.获取信息.云台控制.事件订阅.抓拍图片等,如果没有这个规范 ...

  6. 由于OpenCV的#include <opencv2/opencv.hpp>文件没有放在所有的头文件之前所引起的编译时提示很多错误,如:filesystem.hpp(11,12): error C2144: 语法错误:“bool”的前面应有“;”error C4430: 缺少类型说明符 - 假定为 int。注意: C++ 不支持默认 int等

    现象描述: 由于OpenCV的#include <opencv2/opencv.hpp>文件没有放在所有的其他OpenCV头文件之前所引起的编译时提示很多错误,如:filesystem.h ...

  7. [转]VS2019+CUDA11.1 没有CUDA出现

    1.VS2019+CUDA11.1 没有CUDA出现 2.VS+CUDA 新建项目里没有CUDA选项(附详细图文步骤) 3.No Cuda 10.1 runtime Template in Visua ...

  8. 『AotuHotKey』——一个小巧却高效的实用效率工具

    [!note] 本来主要是想找一下「」和『』,然后这个方法直接可以找到大部分的特殊字符 通过输入法输出 『Ctr + shift + Z』进入搜狗输入法的『符号大全』 在『标点符号』项可以找到「」和『 ...

  9. Ubuntu安装宝塔服务

    Linux面板7.9.4安装脚本 查看详细安装教程 使用 SSH 连接工具,如 堡塔SSH终端 连接到您的 Linux 服务器后, 挂载磁盘 ,根据系统执行相应命令开始安装(大约2分钟完成面板安装): ...

  10. .NET 响应式编程 System.Reactive 系列文章(一):基础概念

    .NET 响应式编程 System.Reactive 系列文章(一):基础概念 引言 在现代软件开发中,处理异步事件和数据流已经成为常见的需求,比如用户输入.网络请求.传感器数据等.这些数据流通常是无 ...