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

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

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

注：今天在用swiper.js做商品轮播图的时候，遇到了在使用flexbox的前提下，子元素设置flex:1;所有子元素被挤在一期的现象（未执行到swipe）； 原因竟然是因为没有设置：flex-shrink属性。 flex-shrink：<number> 默认值 ...

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

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

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

，max-width来解决的，今天重新理了下flex 相关语法，发现以下三个属性简直是好用啊！ 二、基本概念理 ...