一、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. 【js】版本号对比处理方案

    今天在处理一个bug问题,适配客户端版本:若版本号未达到,则不可运行该功能,若达到则可运行. 版本号规则如下:(一般统一为2个点,其他的是数字,版本号从高位到低位,首位越大则越大,首位相同则对比下一位 ...

  2. Java中的String为什么是不可变的？ -- String源码分析

    众所周知, 在Java中, String类是不可变的.那么到底什么是不可变的对象呢? 可以这样认为:如果一个对象,在它创建完成之后,不能再改变它的状态,那么这个对象就是不可变的.不能改变状态的意思是, ...

  3. 什么是事务？事务特性？事务隔离级别？spring事务传播特性？

    一.事务的概述 什么是事务? 在数据库中,所谓事务是指一组逻辑操作单元即一组sql语句,当这个单元中的一部分操作失败,整个事务回滚,只有全部正确才完成提交.判断事务是否配置成功的关键点在于出现异常时事 ...

  4. Q语言-[帝王三国送将辅助]

    纯属自己写的, 玩同一个游戏的朋友,需要送将的, 把需要送的将改名为送, 然后启动辅助即可 本辅助只支持1024x576 191dpi 附上源码 //本源码初始化分辨率1024x576[夏天] Dim ...

  5. bzoj 4770 图样 - 概率与期望 - 动态规划

    题目传送门 传送门I 传送门II 题目大意 有一个$n$个点的完全图,每个点的权值是$[0, 2^{m})$中的随机整数,两点间的边的权值是两点点权的异或和,问它的最小异或生成树的边权和的期望. 考虑 ...

  6. C#线程同步（3）- 互斥量 Mutex

    文章原始出处 http://xxinside.blogbus.com/logs/47162540.html 预备知识:C#线程同步(1)- 临界区&Lock,C#线程同步(2)- 临界区&am ...

  7. Swagger和Postman的配置和使用

    Swagger 1. 配置 pom文件添加swagger依赖,注意版本,2.8.0可以使用 <dependency> <groupId>io.springfox</gro ...

  8. 找出 Xcode 编译C/C++过程文件及生成文件

    在使用 Xcode 编写C/C++时,会发现在项目的目录位置是没有编译过程的那些 .o .exe 文件,只有一个 C/C++ 源代码 .c 文件.如下图(在Mac OS的finder中右键窗口标题名称 ...

  9. 剑指offer：链表中倒数第k个结点

    问题描述 输入一个链表,输出该链表中倒数第k个结点. 解题思路 两个指针都指向头结点,第一个指针先移动k-1个结点,之后两指针同时移动,当第一个指针到链表尾的时候,第二个指针刚好指向倒数第k个结点. ...

  10. T2027 蜈蚣

    传送门 思路: 设 f[ i ][ j ] 为第 i 节,切到第 j 段的最大恶心值. 枚举 左端点 j ,右端点 i ,段数 k →  转移: f [ i ][ k ] = max ( f [ i ...