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: ...
随机推荐
- COM笔记-引用计数
参考网站:https://www.cnblogs.com/fangyukuan/archive/2010/06/06/1752621.html com组件将维护一个称作是引用计数的数值.当客户从组件取 ...
- 【springboot】给你一份Spring Boot知识清单
目录: 一.抛砖引玉:探索Spring IoC容器 1.1.Spring IoC容器 1.2.Spring容器扩展机制 二.夯实基础:JavaConfig与常见Annotation 2.1.JavaC ...
- WPF 中的形状和基本绘图概述
本主题概述如何使用 Shape 对象绘图. Shape 是一种允许您在屏幕中绘制形状的 UIElement 类型. 由于它们是 UI 元素,因此 Shape 对象可以在 Panel 元素和大多数控件中 ...
- 因为手机设置字体大小导致h5页面在webview中变形的BUG
出现这个问题,有以下因素 你的页面采用了rem单位,并且是采用js动态计算html的font-size你的页面被加在了APP中的webview中这该死的手机被重设了字体大小解决方法一般,我们动态计算好 ...
- springboot系列总结(一)---初识springboot
Spring Boot是一个简化Spring开发的框架.用来监护spring应用开发,约定大于配置,去繁就简,just run 就能创建一个独立的,产品级的应用. 一说springboot ,Java ...
- AI 常见术语总结
BN(Batch-normalization)在一层的输出上计算所有特征映射的均值和标准差,并且使用这些值规范化它们的响应.因此使得所有神经图(neural maps)在同样范围有响应,而且是零均 ...
- HCNP Routing&Switching之OSPF LSA类型(二)
前文我们了解了OSPF的一类.二类.三类LSA,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/15209829.html:今天我们来聊一聊OSPF的四类和五类L ...
- Qt5之事件学习总结
首先要明白一个概念,事件和信号并不一样,比如单击一下鼠标,就会产生鼠标事件(QMouseEvent),是对这个动作的描述,而因为按钮被按下了,按钮会发出clicked()的单击信号(是按钮控件产生的) ...
- java交互Scanner类
用next方法接收 import java.util.Scanner; public class Demo01 { public static void main(String[] args) { / ...
- hibernate关联关系(一对多)
什么是关联(association)关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性.例如: class B{ private String name; } pub ...