当指定view为flex布局后，给子元素定义width是不起效果的。 原因：定义为flex布局元素的子元素，自动获得了flex-shrink的属性，这个属性是什么意思呢？就是告诉子元素当父元素宽度不够用时，自己调整自己所占的宽度比，这个flex-shrink设置为1时，表示所有子元素大家同时缩小 ...

lex布局非常好用，但在开发过程中可能会碰到的一些坑 1、内容超出容器大致情况是：在一个设置了display:flex布局的大容器A中并排放置两个子容器，并且子容器设置flex:1，子容器中都有一个元素包含一段文本，这段文本设置了不换行并且显示省略号的样式，当文本过长的时候，子容器会被撑开 ...

对于 flex-shrink 我们都知道它在 flex 布局中控制 flex 盒子空间不足时子元素改如何收缩，平常开发中更多的是使用默认值 1 或者设置 0。那设置其他值的时候会有什么效果呢，不少文章中描述都不是很细，在很长一段时间我甚至以为自己是了解它的。开篇我们带着几个问题1. ...

基本概念 Flex是Flexible Box的缩写，顾名思义为“弹性布局”，用来为盒装模型提供最大的灵活性。 采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 如何转换 ...

问题 面试题：你能说说 flex-shrink 么？ 我们所知 flex 语法如下 并且可以有一些缩写 其中 flex-grow 比较好理解，但是 flex-shrink 关注的就比较少了，正好笔者面试时被问到，一时间想不起来，就查一查并做个笔记 分析 先看一段代码，摘录自 ...

设置了固定宽高的图片被压缩 通常实现如下的效果，是把外层容器设置为display:flex，容器中图片设置固定宽高度，右边元素设置为flex:1，但当右边元素宽度超出剩余空间的时候，图片会被挤压，变成椭圆形。 这是因为在flex容器中，当空间不够的时候，flex-shrink不为0的元素 ...

flex flex-shrink的用法,收缩规则 效果： ps: ...

flex-shrink 属性。 使用之后，如果 flex 容器太小，则子元素会自动缩小。 当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。 子元素的 flex-shrink 接受数值作为属性值。 数值越大，则该元素与其他元素相比会被压缩得更厉害。 比如，一个项目 ...