当指定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. Java线程 interrupt 方法使用异常

    背景 需要在异步任务中中断任务的执行,故选择通过调用 interrupt 方法对线程设置中断信号. 在比较耗时的业务代码增加判断 Thread.currentThread().isInterrupte ...

  2. java-信息安全(二十)国密算法 SM1,SM2,SM3,SM4

    一.概述 国密即国家密码局认定的国产密码算法.主要有SM1,SM2,SM3,SM4.密钥长度和分组长度均为128位.目前主要使用公开的SM2.SM3.SM4三类算法,分别是非对称算法.哈希算法和对称算 ...

  3. Qt数据库应用15-通用数据库同步

    一.前言 数据库同步的主要功能是将本地的数据库记录同步到远程的数据库,其中数据库类型不限,比如本地是sqlite数据库,远程可以是mysql数据库,本地是mysql数据库,远程也可以是postgres ...

  4. Vue3使用Vuex 教程(这才是真正的小白教程!)

    我的项目是vue3+element-plus 我是个菜鸡,我不懂前端.想做一个tags的导航标签页.但是点击标签页之后页面仍然是会重新请求.感觉这不就跟没做一样吗? 遂百度GPT,第一种方式采用的就是 ...

  5. vue3 封装axios

    1添加一个新的 http.js文件 封装axios 引入axios //引入Axios import axios from 'axios' 定义一个根地址 //视你自己的接口地址而定 var root ...

  6. An invitation to 3-d vision: from images to geometric models英文pdf下载

    Ma Y, Soatto S, Košecká J, et al. An invitation to 3-d vision: from images to geometric models[M]. N ...

  7. 零基础IM开发入门(三):什么是IM系统的可靠性?

    本文编写时引用了"聊聊IM系统的即时性和可靠性"一文的部分内容和图片,感谢原作者. 1.引言 上一篇<零基础IM开发入门(二):什么是IM系统的实时性?>讲到了IM系统 ...

  8. ArrayList源码解析-JDK18

    引言 ArrayList在JDK1.7和1.8中的差距并不大,主要差距以下几个方面: JDK1.7 在JDK1.7中,使用ArrayList list = new ArrayList()创建List集 ...

  9. tomcat常用配置详解和优化方法-copy

    tomcat常用配置详解和优化方法 参考: http://blog.csdn.net/zj52hm/article/details/51980194 http://blog.csdn.net/wuli ...

  10. 微服务技术架构、监控、Docker、服务治理等详解

    1.什么是微服务 1)一组小的服务(大小没有特别的标准,只要同一团队的工程师理解服务的标识一致即可) 2)独立的进程(java的tomcat,nodejs等) 3)轻量级的通信(不是soap,是htt ...