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. websocket 11

    1. websocket 回顾: - 什么是轮训? - 通过定时器让程序每隔n秒执行一次操作. - 什么是长轮训? - 浏览器向后端发起请求,后端会将请求 hang 住,最多hang 30s. 如果一 ...

  2. django基础 -- 10.form , ModelForm ,modelformset

    一.生成页面可用的 HTML标签 1.form 所有内置字段 Field required=True, 是否允许为空 widget=None, HTML插件 label=None, 用于生成Label ...

  3. 1.2.1 Excel如何从身份证号中提取日期

    在对应的单元格中我们输入公式: =MID(B3,7,4)&"年"&MID(B3,11,2)&"月"&MID(B3,13,2)&a ...

  4. 汉语言处理工具pyhanlp的简繁转换

      繁简转换 HanLP几乎实现了所有我们需要的繁简转换方式,并且已经封装到了HanLP中,使得我们可以轻松的使用,而分词器中已经默认支持多种繁简格式或者混合.这里我们不再做过多描述. 说明: ·Ha ...

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

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

  6. Flink+Kafka 接收流数据并打印到控制台

    试验环境 Windows:IDEA Linux:Kafka,Zookeeper POM和Demo <?xml version="1.0" encoding="UTF ...

  7. Faster R-CNN代码例子

    主要参考文章:1,从编程实现角度学习Faster R-CNN(附极简实现) 经常是做到一半发现收敛情况不理想,然后又回去看看这篇文章的细节. 另外两篇: 2,Faster R-CNN学习总结      ...

  8. pytorch下的lib库 源码阅读笔记（2）

    2017年11月22日00:25:54 对lib下面的TH的大致结构基本上理解了,我阅读pytorch底层代码的目的是为了知道 python层面那个_C模块是个什么东西,底层完全黑箱的话对于理解pyt ...

  9. Excel 二维数组(数据块)旋转/翻转技巧

    Excel 二维数组(数据块)旋转/翻转技巧 原创 2017-12-30 久石六 久石六 工作中遇到个问题,需要将Excel中的数据块或者说二维数组向右旋转90度,才能再加工处理.当然,不是旋转文本方 ...

  10. c# 字典

    字典 在System.Collections.Generic下, 对应HashTable,添加了泛型的特性,性能更高跟安全 在内存中是散列排布的,存储也是键值对 Dictionary<键的数据类 ...