一、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. Liunx中三种网络模式配置及Xshell连接

    Liunx网络配置 NAT模式下的网络配置: 首先打开网络配置文件:vi   /etc/sysconfig/network-scripts/ifcfg-ens33 修改网卡信息,配置动态Ip过程中,只 ...

  2. c# 调用RDP和SSH实现远程登陆

    1.ssh的登陆实现: windows平台可以安装OpenSSHforWindows 后,可以通过cmd 执行ssh的指令. 也可以在c#编程中实现ssh的登陆: var p = new System ...

  3. qt注册表关联文件格式

    注册表相关知识:http://www.360doc.com/content/12/0812/19/3688062_229808059.shtml(超详细超实用) 将某种类型的格式关联到某个可执行程序, ...

  4. lnmp mysql远程访问设置

    一:iptables 设置开放3306访问 iptables -L -n --line-numbers 1,删除DROP 3306 iptables -D INPUT 5[序列号] 2,添加 ACCE ...

  5. flutter -icons

    icon 合集 https://material.io/tools/icons/?icon=account_balance&style=baseline

  6. golang从文件按行读取并输出

    package main import ( "fmt" "os" "bufio" "io" "time&quo ...

  7. Linux下SSH远程连接断开后让程序继续运行解决办法

    一.screen安装 yum  install screen   #CentOS安装 sudo apt-get install screen #ubuntu安装 二.screen常用命令 screen ...

  8. 动态 DP 学习笔记

    不得不承认,去年提高组 D2T3 对动态 DP 起到了良好的普及效果. 动态 DP 主要用于解决一类问题.这类问题一般原本都是较为简单的树上 DP 问题,但是被套上了丧心病狂的修改点权的操作.举个例子 ...

  9. 使用bootstrap-select有时显示“Nothing selected”

    .html()后加 $('#courseList').selectpicker('refresh'); $('#courseList').selectpicker('render'); 来源

  10. Phpstorm数组对齐设置

    进入 Editor > Code Style > PHP > Wrapping and Braces , 勾选 Align consecutive assignments 和 Ali ...