因为flex属性默认值为flex:0 1 auto;其中 1 为 flex中的 flex-shrink 属性。

该属性介绍:

一个数字，规定项目将相对于其他灵活的项目进行收缩的量。

根据上述介绍可以理解为默认 1 为开启收缩

所以可以将display:flex;下的子元素的flex属性设置为flex:0 0 auto;

解决了display:flex下的子元素设置宽度无效的问题。

display:flex;下的子元素width无效问题的更多相关文章

  1. jquery层级原则器（匹配父元素下的子元素）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Flex 4 不同主题下容器子元素的管理方法

    Flex 下,容器主要分两类:Spark容器, Halo容器. Spark容器 Halo容器 说明 numElements numChildern 容器的子元素数量. addElement( ) ad ...

  3. 关于在transform下的子元素设置fixed无效的困惑

    最近的项目是要实现一个点击显示隐藏边栏的效果,而且需要边栏随着滚动而滚动. 思路简单,不就一个css的动画和一个position为fixed,搞定!但不想,设为fixed的子元素竟然无法fixed,这 ...

  4. 使用flex防止fit-content子元素冲出父元素宽度的方法

    父元素设置了min-width:fit-content后,其宽度由子元素的宽度来决定 <!DOCTYPE html> <html lang="en"> &l ...

  5. flex布局取消子元素（img、div等）缩放：

    取消子元素(img.div等)缩放: 父元素: display: flex ; 子元素: flex-shrink: 0;

  6. js 下获取子元素的方法

    笔记核心: firstElementChild只会获取元素节点对象,从名称就可以看出来,firstChild则可以获取文本节点对象(当然也可以获取元素节点对象),比如空格和换行都被当做文本节点. js ...

  7. stylus选中hover元素的兄弟元素下的子元素

    stylus设置兄弟元素样式:鼠标浮动在 .video-li 元素上时,.video-li 兄弟中 .video-info 下的 .word 显示. .video-li &:hover ~ . ...

  8. C# 根据Combobox控件来动态显示TabControl下的子元素

    根据下来列表来动态显示TabControl下的元素 需要准备两个控件:Combobox (命名为:cbPrjType)和 TabControl (命名为:tabPrjType),TabControl下 ...

  9. IE8 td元素 width无效的bug;

    不经意间做项目发现IE的td在某种情况下好奇怪,自己设置的width不起作用: 后经google大法,发现解决方案:已验证过完美解决bug; <table style="width:  ...

随机推荐

  1. 寻找写代码感觉（三）之使用 Spring Boot 编写接口

    一.前言 项目配置完之后,接着就是写接口了,那咱们就开始吧. 二.项目配置补充知识点 上篇文章写的是关于项目属性配置的一些知识,这里针对上次遗忘内容进行补充如下: 2.1.获取配置文件的值 在appl ...

  2. windows上解决git每次重复输入账号密码

    win7电脑: 1.在 C:\Users\Administrator 下 编辑 .gitconfig文件 2.在原有内容下添加一行(此行作用为自动保存,保存修改后再使用一次GIT,输入账号密码后下次即 ...

  3. C++ 各种构造函数

    c++构造函数的知识在各种c++教材上已有介绍,不过初学者往往不太注意观察和总结其中各种构造函数的特点和用法,故在此我根据自己的c++编程经验总结了一下c++中各种构造函数的特点,并附上例子,希望对初 ...

  4. MySQL常用权限操作

    MySQL常用权限操作 ** ubuntu mysql 8.0.21修改root密码 ** 1.查看默认安装密码: sudo cat /etc/mysql/debian.cnf 2. 登录mysql ...

  5. Javascript - Vue - webpack + vue-cil

    cnpm(node package manager)和webpack模块 npm是运行在node.js环境下的包管理工具(先安装node.js,再通过命令 npm install npm -g 安装n ...

  6. PyTorch安装及试用 基于Anaconda3

    设置Torch国内镜像 conda config --add channels https://mirrors.tuna.tsinghua.edu.cn/anaconda/cloud/pytorch/ ...

  7. shell脚本 批量添加删除用户

    2021-07-26 1.批量添加用户 # 编写脚本 vi add_student_50.sh # 添加用户组 student groupadd student # 添加用户 student1-stu ...

  8. vue 引用省市区三级联动(element-ui Cascader)

    npm 下载 npm install element-china-area-data -S main.js import {provinceAndCityData,regionData,provinc ...

  9. Docker详解（一）——

    Docker详解 https://www.cnblogs.com/antLaddie/p/14276726.html

  10. MySQL——字符集

    -- 字符集:是一个系统支持的所有抽象字符的集合 MySQL数据库的字符集(包括两个部分): 1.字符集:character 2.校对规则:collation MySQL中常见的字符集: utf8 l ...