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. Java高级特性 第4节 输入输出流

    一.使用I/O操作文件 关键步骤: 使用File类操作文件或目录属性 使用FileInputStream类读文本文件 使用FileOutputStram类写文本文件 使用BufferedReader类 ...

  2. 第0章 概述及常见dos命令

    计算机发展史 计算机的发展历史有多长?真正意义上的计算机诞生,距今也只有80多年的时间.80年,对于每一个人来说,是很长的时间,但对于整个历史来说,只是短短的一瞬间. 从第一代电子计算机的发明,到今天 ...

  3. 红米note3发热严重，小米真垃圾！

    红米note3全网通高配版,高通处理器骁龙650(MSM8956),夏天在有空调的房间,上网几分钟手机发烫,真垃圾! ROM已经是官方最新稳定版.MIUI8.5.2.0(LHNCNED) 红米NOTE ...

  4. Reference.svcmap: Could not load file or assembly

    Reference.svcmap: Could not load file or assembly 在添加服务的时候出现如上错误, 把这个勾去掉就可以了.

  5. Pycharm初始创建项目和环境搭建

    Pycharm确实是一个非常不错的Python开发IDE,尤其对于初学者而言. 打开新建项目 1．选择新建一个Pure Python项目,新建项目路径可以在Location处选择. 2.Project ...

  6. Struts2复习

    补充 声明处为什么要继承前面的actionsupport?继承action的execute等格式啊,更规范 声明处为什么后面实现一个model?数据封装到模型再返回去方便啊 值栈是什么啊?原理呐?存放 ...

  7. Linux下的文件操作——基于文件指针的文件操作(缓冲)

    目录操作 创建和删除目录: 原型为: #include <sys/stat.h> #include <sys/types.h> #include <unistd.h> ...

  8. python之路——16

    王二学习python的笔记以及记录,如有雷同,那也没事,欢迎交流,wx:wyb199594 学习内容 1.内置函数 1. python 数据类型:int bool 数据结构:dic list tupl ...

  9. 知识点：spring 完全手册

    什么是spring spring是一个开源框架,为简化企业级开发而生,使用spring可以使简单的java bean 实现以前只有EJG才能实现的功能. Spring是一个轻量级的控制反转(IoC)和 ...

  10. Deployment Descriptor Web.xml

    Deployment Descriptor部署描述符: - 部署描述符是要部署到Web容器或EJB容器的Web应用程序或EJB应用程序的配置文件. - 部署描述符应包含EJB应用程序中所有企业bean ...