display:flex;下的子元素width无效问题
因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。
该属性介绍:
一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
根据上述介绍可以理解为默认 1 为开启收缩
所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto;
解决了display:flex下的子元素设置宽度无效的问题。
display:flex;下的子元素width无效问题的更多相关文章
- jquery层级原则器(匹配父元素下的子元素)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Flex 4 不同主题下容器子元素的管理方法
Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...
- 关于在transform下的子元素设置fixed无效的困惑
最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...
- 使用flex防止fit-content子元素冲出父元素宽度的方法
父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...
- flex布局取消子元素(img、div等)缩放:
取消子元素(img.div等)缩放: 父元素: display: flex ; 子元素: flex-shrink: 0;
- js 下获取子元素的方法
笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...
- stylus选中hover元素的兄弟元素下的子元素
stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...
- C# 根据Combobox控件来动态显示TabControl下的子元素
根据下来列表来动态显示TabControl下的元素 需要准备两个控件:Combobox (命名为:cbPrjType)和 TabControl (命名为:tabPrjType),TabControl下 ...
- IE8 td元素 width无效的bug;
不经意间做项目发现IE的td在某种情况下好奇怪,自己设置的width不起作用: 后经google大法,发现解决方案:已验证过完美解决bug; <table style="width: ...
随机推荐
- 题解 P4336 [SHOI2016]黑暗前的幻想乡
题解 前置芝士 :矩阵树定理 本题是一道计数题,有两个要求: 建造的公路构成一颗生成树 每条公路由不同的公司建造,每条公路与一个公司一一映射 那么看到这两个要求后,我们很容易想到第一个条件用矩阵树定理 ...
- 9、二进制安装K8s之增加node
二进制安装K8s之增加node 1.复制文件,要部署几台就直接复制即可 #二进制文件 scp /data/k8s/bin/{kubelet,kube-proxy} root@192.168.100.1 ...
- DataTable 读取每一行的内容
foreach (DataRow item in dataTable.Rows) { for (int i = 0; i < dataTable.Columns.Count; i++) { Co ...
- 【java web】过滤器filter
一.过滤器简介 过滤器filter依赖于servlet容器 所谓过滤器顾名思义是用来过滤的,Java的过滤器能够为我们提供系统级别的过滤,也就是说,能过滤所有的web请求, 这一点,是拦截器无法做到的 ...
- vue2.0中模拟数据的配置
在开发过程中,有时候接口跟不上我们的进度,我们要测试,就需要自测. 现在vue已经升级到2.0版本了,早期在vue构建工程文件在build里面有dev-server.js,但是后来构建去除了该文件集成 ...
- Int 2e 与 Sysenter区别
参考:张银奎<软件调试>第八章 Int 2e: Windows将2e号向量专门用作系统调用,在启动早起初始化中断描述表时便注册好了适合的服务例程.因此当NtDll中的NtReadFile发 ...
- 2020年秋游戏开发-flappy bird
此作业要求参考https://edu.cnblogs.com/campus/nenu/2020Fall/homework/11577 GitHub地址为https://github.com/15011 ...
- ASP截取字符 截取字符之间的字符
ASP截取字符:MID函数Mid(变量或字串符,开始字节, 结尾字节(可不填)) InStrRev(变量, "字串符") 最后出现位置InStr(变量, "字串符&qu ...
- nRF52832蓝牙iBeacon广播
开发环境 SDK版本:nRF5_SDK_15.0.0 芯片:nRF52832-QFAA 蓝牙iBeacon实现 iBeacon的核心就是广播,不需要进行连接,通过在广播包中插入信息然后广播出去. 广播 ...
- MongoDB 常见问题 - 解决找不到 mongo、mongod 命令的问题
问题背景 成功安装 MongoDB 后执行 Mongo.MongoD 显示找不到命令 解决方案 echo 'export PATH="/usr/local/opt/mongodb-commu ...