flex 布局子元素被挤压的问题

简介: flex 布局子元素被挤压的问题
Flex 意为 “弹性布局”,是一种在开发静态页面过程中常用的布局模式。
开发购物车使用flex布局的时候遇到的一种场景:子元素被挤压
具体如图所示,

当商品名称超出两行文字时显示省略号, 是使用flex布局的。
占位较多的子元素会去挤压别的子元素。
解决方法很简单, 就是使用flex-shrink属性;
flex-shrink 属性定义了项目的缩小比例,默认为1。
即如果空间不足,该项目将缩小,它还有另外一个值,就是0。
如果在子元素的css样式中添加flex-shrink属性,
然后把值改为 0:flex-shrink:0 。
那么当前元素就不会被其他子元素挤压。

遇见问题,这是你成长的机会,如果你能够解决,这就是收获。

相关文章
|
8天前
flex布局
flex布局
30 0
|
前端开发
css:flex布局最后一个子元素靠右摆放
css:flex布局最后一个子元素靠右摆放
789 0
css:flex布局最后一个子元素靠右摆放
|
8天前
|
前端开发 定位技术
让一个父元素中的子元素垂直水平居中的方法
让一个父元素中的子元素垂直水平居中的方法
|
8天前
|
前端开发
css flex布局两个元素水平居中垂直居中
css flex布局两个元素水平居中垂直居中
19 1
|
8天前
解决flex布局最后一行(左靠齐)
解决flex布局最后一行(左靠齐)
|
9月前
|
容器
Flex布局是什么?
Flex布局是什么?
|
11月前
|
容器
Flex 布局
Flex 布局
|
容器
Flex弹性盒子布局实现骰子6点
Flex弹性盒子布局实现骰子6点
108 0
Flex弹性盒子布局实现骰子6点
|
Java 程序员 容器
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(下)
5.当切换容器排列方式后,水平对齐以及垂直对齐的 应用 变化(重点、难点⭐⭐⭐⭐⭐) 当使用flex-direction: (例 column) ;时 justify-content 、 align-content 、align-items发生的变化 当排列为column / column-reverse 时,其实容器的主轴发生了变化 主轴现在是竖轴,副轴是横轴
104 0
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(下)
|
前端开发 安全 容器
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(上)
Flex弹性盒子 1.说在前头 1.1.Flex布局出现之前 我们知道传统的页面布局依赖于 盒状模型 依赖于display、position、float属性 对于某些特殊布局来说特别不方便,比如垂直居中(比较不容易实现) 1.2.Flex布局出现后 2009年,W3C提出Flex布局 简便、完整、响应式的各种实现页面布局(目前已得到所有主流浏览器的支持)
269 0
Flex弹性盒子(一篇带你掌握潮流 Flex 布局)(上)

热门文章

最新文章