Flex 意为 “弹性布局”，是一种在开发静态页面过程中常用的布局模式。

开发购物车使用flex布局的时候遇到的一种场景：子元素被挤压

具体如图所示，



当商品名称超出两行文字时显示省略号， 是使用flex布局的。

占位较多的子元素会去挤压别的子元素。

解决方法很简单， 就是使用flex-shrink属性；

flex-shrink 属性定义了项目的缩小比例，默认为1。

即如果空间不足，该项目将缩小，它还有另外一个值，就是0。

如果在子元素的css样式中添加flex-shrink属性，

然后把值改为 0：flex-shrink：0 。

那么当前元素就不会被其他子元素挤压。

flex 布局子元素被挤压的问题的更多相关文章

  1. iOS开发——UI进阶篇（二）自定义等高cell，xib自定义等高的cell，Autolayout布局子控件，团购案例

    一.纯代码自定义等高cell 首先创建一个继承UITableViewCell的类@interface XMGTgCell : UITableViewCell在该类中依次做一下操作1.添加子控件 - ( ...

  2. flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙（垂直间隙）

    1 .flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况 实现效果: 解决方案:使用after伪类, 解决最后一排数量不够两端分布的情况.宽度就是每张图片的宽度 .list:after { ...

  3. 微信小程序 Flex局部元素被挤压问题

    关于Flex布局不在此处赘述,需要了解的可以查阅官方文档:基本的布局方法——Flex布局 当使用Flex布局,想实现如下图1的效果时,代码编写如下: 图1: <!-- wxml文件 --> ...

  4. chrome 49 版本bug: flex父元素设置flex:1 , 子元素用height:100%无法充满父元素

    1 <div class="container"> <div class="item"> <div class="ite ...

  5. [CSS七分钟系列]都1902年了,还不知道用margin:auto给flex容器内元素分组?

    最近看到几篇博文讲解margin:auto在flex容器中的使用,可惜的是大多讲解都浮于页面表现,没深究其中的作用机理,本文在此浅薄对其表现机理做简单探讨. 引子 日常业务迭代过程中,flex已经是前 ...

  6. flex盒子里面元素linehight对高度的影响

    那天,高高兴兴的测试flex属性.大家都知道,当父盒子display:flex的时候,子盒子即使宽高和大于父盒子,也会由于flex的特性进行收缩:然而,在给父盒子加了flex-direction:co ...

  7. Flex 布局里 input 宽度最小 150px 的问题， 浏览器 BUG?

    今天在使用 flex 布局时, 发现当 flex 布局容器比小(小于 150px )时,里面的 input[text] 的宽度会比容器宽: <style> #main { width:12 ...

  8. 每日技术总结：flex,选项卡,classList,

    1.Flex布局子元素垂直居中 给父元素添加以下样式: .parent { display: flex; align-items: center; } 2.js面向对象的选项卡 见另一篇文章 js面向 ...

  9. 学习 ExtJS 4 面板与布局

    原文 http://www.cnblogs.com/codealone/archive/2013/06/04/3091325.html 面板Panel Ext.panel.Panel拓展自Ext.co ...

  10. Ext布局

    Ext主要包括11种标准布局方式:Auto(自动布局).CheckboxGroup(复选框组布局).Fit(自适应布局).Column(列布局).Accordion(折叠布局).Table(表格布局) ...

随机推荐

  1. 克魔助手：方便查看iPhone应用实时日志和奔溃日志工具

    ​ 克魔助手:方便查看iPhone应用实时日志和奔溃日志工具 查看ios app运行日志 摘要 本文介绍了一款名为克魔助手的iOS应用日志查看工具,该工具可以方便地查看iPhone设备上应用和系统运行 ...

  2. WebService autoconfigure.web.servlet.DispatcherServletPath

    SpringBoot WebService 源代码:https://gitee.com/VipSoft/VipWebService SpringBoot 整合 WebService cxf 报错 Co ...

  3. peewee update和save性能分析

    背景 python项目中使用了peewee这款orm框架,在对数据库更新时有两种语法,分别是save和update方法.有同事说从peewee的日志来看,update比save更快,于是做了一个简单的 ...

  4. Python最佳实践书籍《Python 工匠》摘要

    <Python工匠>是一本案例.技巧与工程实践的指导书,该书不是python基础语法的教程,而是python中最佳实践的教程,属于python进阶类的书籍.可以将本书当做PEP8编程规范的 ...

  5. 【3rd Party】nlohmann json 基础用法

    参考链接:Here 什么是nlohman json ? nlohman json GitHub - nlohmann/json: JSON for Modern C++ 是一个为现代C++(C++11 ...

  6. Mac ｜ HomeBrew 安装 & 配置 MySQL

    这个是我最新并且一直推崇的方法: 1.安装:brew install mysql 2.开启mysql:mysql.server start 3.使用mysql的配置脚本:/usr/local/opt/ ...

  7. Mynavi Programming Contest 2021（AtCoder Beginner Contest 201）A ~ E题题解

    A - Tiny Arithmetic Sequence 水题,判断3个数是否能构成等差数列 void solve() { int a, b, c; cin >> a >> b ...

  8. OKR之剑·实战篇06：OKR致胜法宝-氛围&业绩双轮驱动（下）

    作者:vivo 互联网平台产品研发团队 本文是<OKR 之剑>系列之实战第 6 篇-- 本文介绍团队营造氛围的方法与实践.在业绩方面的探索与输出,在两方面分别总结了一些经验分享给大家. 一 ...

  9. AIO异步通信。BIO同步阻塞式IO， NIO同步非阻塞通信。

    IO 什么是IO? 它是指计算机与外部世界或者一个程序与计算机的其余部分的之间的接口.它对于任何计算机系统都非常关键,因而所有 I/O 的主体实际上是内置在操作系统中的.单独的程序一般是让系统为它们完 ...

  10. Liunx常用操作(三)-如何忽略大小写查找

    1.vim 中的查找 搜索文件内容时加上 /c 参数可以忽略搜索字符的大小写 正常搜索:/helloworld 忽略操作:/helloworld/c 2.find 查找 使用find命令搜索文件时如果 ...