一、Flex布局使用时的坑：

　　1、常见的左右分布的flex布局中，左侧给定宽度，右侧占满剩余空间，但当右侧中文字内容很多时，会挤占左侧空间，时左侧不能按照定宽显示。

<style>

        .father{

            display: flex;

            width: 500px;

            height: 200px;

        }

        .left{

            width: 200px;

            background-color: green;

        }

        .right{

            flex-grow: 1;

            background-color: red;

        }

    </style>

    <body>

        <div class="father">

            <div class="left">左边左边边左边左边</div>

            <div class="right">右边</div>

        </div>

    </body>

　　正确宽度显示如下：

　　　　

　　但，当右侧红框内文字变多时：

　　　　

显然当右侧文字增多，挤占剩余空间时左侧会被压缩，解决方法如下：

　　1）给右侧添加宽度“width:0;”，指定宽度0后

 .right{

            flex-grow: 1;

            background-color: red;

        }

　　2）给设置了flex-grow属性的元素添加flex-basis属性

 .right{

            flex-grow: 1;

            background-color: red;

            flex-basis: 0%;

        }

　　2、flex布局中basis与width的区别，参考链接https://www.jianshu.com/p/17b1b445ecd4

css属性应用bug大杂烩(后续继续更新)的更多相关文章

  1. IE的CSS相关的BUG(整理一)

    本来不想弄这个ie的bug的,真的很想让它快点死掉,可是事与愿违啊,没办法,还是贴出来,以备自用. 这个网页(http://haslayout.net/css/index)上例举了所有的IE和CSS相 ...

  2. css编写注意事项（不定时更新）

    CSS的编写是需要积累的,而一个好的css编写习惯对我们将来的成长是非常有利的,我会把我平时看到的或者遇到的会不定时的更新到这里,不时翻一下,但求有所进步. 如果各位看官也有看法和建议,评论下,我也会 ...

  3. CSS属性操作

    CSS属性操作 1 属性选择器 Elenment(元素) E[att] 匹配所有具有att属性的E元素,不考虑它的值.(注意:E在此处可以省略)(推荐使用) 例如:[po]{ font-size: 5 ...

  4. js原生获取元素的css属性

    习惯了用jQuery的css()的方法获取元素的css属性,突然不用jquery了,当要获得元素的css时候,我瞬间停顿了一下,咦?咋获取元素的css值?比如获取元素的width.是这样么?docum ...

  5. CSS的未来：一些试验性CSS属性

    尽管现代浏览器已经支持了众多的CSS3属性,但是大部分设计师和开发人员貌似依然在关注于一些很“主流”的属性,如border-radius.box-shadow或者transform等.它们有良好的文档 ...

  6. 关于那些常见的坑爹的小bug（会持续更新）

    当我学了矩阵分析的时候我知道什么是麻烦,当我学了傅里叶级数的时候我知道什么是相当麻烦. 然而,当我刚刚接触前端,我才明确什么叫做坑爹的ie6.这个分享对于经验丰富的前端基本都遇过.对于刚入行的新手,也 ...

  7. 前端基础-CSS属性操作

    前端基础-CSS属性操作 css text 文本颜色:color 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB( ...

  8. CSS 属性选择器的深入挖掘

    CSS 属性选择器,可以通过已经存在的属性名或属性值匹配元素. 属性选择器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展.本文将会比较全面的介绍属性选择器,尽可能的去挖掘这个选择器在不同场 ...

  9. 《Head First HTML与CSS》的CSS属性

    关于继承的结论. 1.元素选择器的作用强于继承的作用:用户定义强于浏览器默认(详见(3)<Head First HTML与CSS>学习笔记---CSS入门的2) 2.基于类的选择器> ...

随机推荐

  1. domain

    babibobucecicudadedidufafugeguhehujijukakekulalelilumimomunapapipopuqiqurerirusasesisutatetituwawowu ...

  2. Job for network.service failed because the control process exited with error code

    转自:https://blog.csdn.net/dongfei2033/article/details/81124465 今天在centOS 7下更改完静态ip后发现network服务重启不了,翻遍 ...

  3. 如何在xlwt中编写多个列的单元格？

    目的,写下面的表格: ---------------- | Long Cell | ---------------- | 1 | 2 | ---------------- 如果下面这样写: sheet ...

  4. 详解设计模式在Spring中的应用

    设计模式作为工作学习中的枕边书,却时常处于勤说不用的尴尬境地,也不是我们时常忘记,只是一直没有记忆. 今天,在IT学习者网站就设计模式的内在价值做一番探讨,并以spring为例进行讲解,只有领略了其设 ...

  5. kubernets event 分析

    1. event 是一个很重要的组成部分 event 分析 Kubernetes(K8s)Events介绍(上) Kubernetes Events介绍(中) Kubernetes Events介绍( ...

  6. 立即执行函数（自执行函数） IIFE

    // 最常用的两种写法 (function(){ /* code */ }()); // 老道推荐写法 (function(){ /* code */ })(); // 当然这种也可以 // 括号和J ...

  7. 你不知道的JS（2）深入了解闭包

    很久之前就想写一篇关于闭包的博客了,但是总是担心写的不够完全.不够好,不管怎样,还是要把我理解的闭包和大家分享下,比较长,希望耐心看完. 定义 说实话,给闭包下一个定义是很困难的,原因在于javasc ...

  8. Python模块 2

    collections模块 在内置数据类型(dict.list.set.tuple)的基础上,collections模块还提供了几个额外的数据类型: 1.namedtuple: 生成可以使用名字来访问 ...

  9. vscode打开django项目pylint提示has not "object" member

    vscode 打开 django 项目提示 has not "object" member 是因为 Django 动态地将属性添加到所有模型类中,所以 ide 无法解析. 解决方案 ...

  10. Visual Studio 2019 double clicking project(custom behavior)

    Issue