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. 在springboot中,如何读取配置文件中的属性

    摘要:在比较大型的项目的开发中,比较经常修改的属性我们一般都是不会在代码里面写死的,而是将其定义在配置文件中,之后如果修改的话,我们可以直接去配置文件中修改,那么在springboot的项目中,我们应 ...

  2. 如何给网页和代码做HTML加密?

    ​ 如何给网页和代码做HTML加密? 本篇文章给大家谈谈html混淆加密在线,以及HTML在线加密对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔. ​ 如何给代码加密? 1.源代码加密软件推荐使 ...

  3. html jquery from 表单提交 application/x-www-form-urlencoded 改成 json

    html jquery from 表单提交 $(form).ajaxSubmit  application/x-www-form-urlencoded  改成 json 要使用 jQuery 根据 n ...

  4. Asp.net MVC 跨域设置

    .Net Core 跨域 <system.webServer> <httpProtocol> <customHeaders> <add name=" ...

  5. 解决ttrss(Tiny Tiny RSS)中fever无法使用的问题

    问题描述 在ttrss刚搭建好的时候,进行了如下操作: 随后键入了密码(fever密码) 最后,按照官方给的提示,在Fluent Reader中测试,弹出如下错误信息: 解决方案 复制官方给的链接,删 ...

  6. 《机器学习实战》 | 第3章 决策树(含Matplotlib模块介绍)

    系列文章:<机器学习实战>学习笔记 本篇文章使用到的完整代码:Here 决策树 优点:计算复杂度不高,输出结果易于理解,对中间值的缺失不敏感,可以处理不相关特征数据. 缺点:可能会产生过度 ...

  7. Codeforces Round #619 (Div. 2) A-D

    比赛链接:Here 1301A. Three Strings 题意: 给三个相同长的字符串 \(a,b,c\)​ ,对于每个位置 \(i\)​ ,你必须做一次操作:交换 \(a_i\)​ 和 \(c_ ...

  8. 前端科普系列(4):Babel —— 把 ES6 送上天的通天塔

    本文首发于 vivo互联网技术 微信公众号 链接: https://mp.weixin.qq.com/s/plJewhUd0xDXh3Ce4CGpHg作者:Morrain 一.前言 在上一节 < ...

  9. DOCKER本地仓库

    概述 随着docker的应用越来越多,安装部署越来越方便,批量自动化的镜像生成和发布都需要docker仓库的本地化应用. 试用了docker的本地仓库功能,简单易上手,记录下来以备后用. 环境 cen ...

  10. C#树的实现

    ddd /// <summary> /// 遍历,线索化等操作的接口 /// </summary> interface ITravelBinTree { void PreOrd ...