1.首先 flex-grow设置在子项目上

2.flex-grow默认值为0，如果为值1的时候就会撑满

3.flex-grow还可以给其中的一个子元素单独设置，设置为2，其它的则为1或者2都可以，具体由布局决定，目的在于，制定某一元素放大，项目中还是很有用的，类似下图测试2的最大

4.flex-shrink的用法同flex-grow相同，只是前者是当空间不足的时候都等比缩小，如果设置其中一个元素值为非1的话则不会同比缩小，其它同级的缩小

关于弹性布局的 flex-grow的用法和flex-shrink的用法的更多相关文章

  1. Flutter布局----弹性布局 (Flex)

    弹性布局(Flex) 弹性布局允许子组件按照一定比例来分配父容器空间.弹性布局的概念在其它UI系统中也都存在,如H5中的弹性盒子布局,Android中的FlexboxLayout等.Flutter中的 ...

  2. css弹性布局

    1.弹性布局是什么 在移动端一种方便的布局方式,打破了之前用浮动,定位的布局,更加灵活. 2.弹性布局的格式 包含父元素和子元素,有对应的属性应用在父元素和子元素达到布局的目的 3.父元素的属性 要开 ...

  3. [前端随笔][css] 弹性布局

    说在前面 弹性布局,顾名思义就是有弹性,能够根据屏幕/当前空间大小自由伸缩的.使用弹性布局可以很好的适应各种尺寸的客户端. 关键代码 display:flex; 设定元素为弹性布局 <文档传送门 ...

  4. html5弹性布局两则，有交互。

    要开发一个后台管理框架,要求如下效果. 然后开始找各种弹性布局啊什么的,用了flex写了一个,但是觉得不好,首先是兼容,其次它会破坏掉里面子元素的一些css特性,为了不给自己找麻烦我还是用传统写法吧. ...

  5. CCS3的过渡、变换、动画以及响应式布局、弹性布局

    CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

  6. css--flex弹性布局详解和使用

    前言 前端开发最基础的能力是根据 ui 设计稿迅速还原页面,拿到设计稿不要急于写代码,首先要对页面进行分析,对页面的整体布局有个大概的了解,然后先实现一个整体的布局,再把布局拆分成逐个小模块,逐个去实 ...

  7. flex弹性布局学习笔记

    前言 资料来源于网络,本人只是对此作了一下操作,记录于此以便以后查阅.目的在于梳理自己前端凌乱的知识点. 本文根据 Brian Franco 的一个flexbox.scss库来记录 入职新公司前对移动 ...

  8. flex弹性布局属性详解！

    详细看下flex弹性布局具体属性: flex容器属性详解:flex-direction:row/column:(横排/竖排) 决定元素的排列方向:flex-wrap:nowrap/wrap/wrap- ...

  9. 移动端弹性布局--flex

    目前,Flex布局,可以简便.完整.响应式地实现各种页面布局.而且,它已得到了所有浏览器的支持,这意味着,我们能很安全地使用这项功能. 如果你对弹性网页布局感兴趣,那可别错过flex这么好用的属性哦. ...

  10. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

随机推荐

  1. 浅谈JavaScript函数重载

    上个星期四下午,接到了网易的视频面试(前端实习生第二轮技术面试).面了一个多小时,自我感觉面试得很糟糕的,因为问到的很多问题都很难,根本回答不上来.不过那天晚上,还是很惊喜的接到了HR面电话.现在HR ...

  2. docker之 网络模式和跨主机通信

    Docker的四种网络模式Bridge模式 当Docker进程启动时,会在主机上创建一个名为docker0... Docker的四种网络模式 Bridge模式 当Docker进程启动时,会在主机上创建 ...

  3. ROS Qt Creator Plug-in wiki

    在Qt中配置ros工程. 环境: ubuntu16.04: ros kinetic: Qt5.7 参考网址: https://ros-industrial.github.io/ros_qtc_plug ...

  4. G2 绘制混合图例 demo

    G2 绘制混合图例 demo import G2 from '@antv/g2'; import DataSet from '@antv/data-set'; // G2 对数据源格式的要求,仅仅是 ...

  5. Java同步学习（持续更新）

    在需要考虑线程安全性的场合,可以考虑以下五种方式来实现线程的安全性: 1.同步方法 即有synchronized关键字修饰的方法. 由于java的每个对象都有一个内置锁,当用此关键字修饰方法时,   ...

  6. 【动态规划】最大连续子序列和，最大子矩阵和，最大m子段和

    1.最大字段和问题 求一个序列最大连续子序列之和. 例如序列[-1,-2,-3,4,5,-6]的最大子段和为4 + 5 = 9. ①枚举法 int MaxSum(int n,int *a){ int ...

  7. 纯CSS制作图形效果

    下面所有的例子都是在demo.html的基础上添加相关样式实现的. <!DOCTYPE html> <html> <head> <meta charset=& ...

  8. 网络之TCP握手总结

    目录: 31.Tcp握手的一些问题? 21.Tcp三次握手及SYN攻击: 四次握手? 为什么建立连接是三次握手,而关闭连接却是四次挥手? 13.TCP释放连接四次握手 12.TCP建立连接三次握手 1 ...

  9. [UE4]UMG小结

    一.当没有需要的UI怎么办?先别急着自己定制,可以到虚幻商城去看看,各种类型的UI都有,而且价格都不贵. 二.推荐一个比较有参考价值的UI:User Interface Kit,里面的UI很多,还有小 ...

  10. 高性能mysql 第六章查询性能优化 总结（上）查询的执行过程

    6  查询性能优化 6.1为什么查询会变慢 这里说明了的查询执行周期,从客户端到服务器端,服务器端解析,优化器生成执行计划,执行(可以细分,大体过程可以通过show profile查看),从服务器端返 ...