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. 100道JS构造函数面试题

    1. var User = { count: 1, getCount: function () { return this.count; } }; console.log(User.getCount( ...

  2. CNN+BLSTM+CTC的验证码识别从训练到部署

    项目地址:https://github.com/kerlomz/captcha_trainer 1. 前言 本项目适用于Python3.6,GPU>=NVIDIA GTX1050Ti,原mast ...

  3. 我发起了一个 网格计算 协议 开源项目 GridP

    GridP  是   Grid Protocol   的 全称  . 我在 <关于软件产业的两个契机>  https://www.cnblogs.com/KSongKing/p/95319 ...

  4. 浅谈JS的数组遍历方法

    用过Underscore的朋友都知道,它对数组(集合)的遍历有着非常完善的API可以调用的,_.each()就是其中一个.下面就是一个简单的例子: var arr = [1, 2, 3, 4, 5]; ...

  5. Linux之目录结构配置

    因为 Linux 的开发者实在太多了,如果每个人都发展出属于自己的目录配置方法, 那么将可能会造成很多管理上的困扰.所以,就有一个叫做Filesystem Hierarchy Standard (FH ...

  6. 变量、&连接、函数与过程、按下某键

    1.变量的声明 常量 信息 为 文本型 = "你好,世界!" '这是常量 变量 结果 为 整数型 '这是程序集变量,在程序集的开头定义即可 变量 测试 为 整数型 = '可以直接给 ...

  7. JAVA 集合操作总结

    1.Collection 1.基本操作 对集合的基础操作 1.boolean add(Object o) //添加对象到集合 2.boolean remove(Object o) //删除指定的对象 ...

  8. 2th Dec 2018

    北京的冬天越来越冷了,是那种钻进骨头里的冷.果,爸爸又走了.每次离开都格外的难受,这种感觉是加剧的,一次比一次强烈.走的时候,你一脸的不高兴,能感觉出来你的不开心,你勉强让爷爷从我怀里面接过去.3个半 ...

  9. python 的序列化和反序列化

    什么是序列化?简单来说就是将数据存储到物理内存上的过程叫序列化. 什么是反序列化?将数据从物理内存存储到程序内存的过程叫做反序列化. 下面来看一下python中使用json进行序列化和反序列化的实例d ...

  10. jvm常见的面试题

    1. 内存模型以及分区,需要详细到每个区放什么. 2. 堆里面的分区:Eden,survival from to,老年代,各自的特点. 3. 对象创建方法,对象的内存分配,对象的访问定位. 4. GC ...