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. 使用fpm 软件包打包

    安装 sudo gem install --no-ri --no-rdoc fpm 简单使用 一个 redis的简单demo % ls src/redis-server redis.conf src/ ...

  2. java_注解

    注解1    注解的概念    jdk自带的注解    声明与使用注解的基本语法        注解的概念        在javaEE与开源框架中广泛使用,泛型在集合框架中广泛使用        注 ...

  3. Java高级特性 第5节 序列化和、反射机制

    一.序列化 1.序列化概述 在实际开发中,经常需要将对象的信息保存到磁盘中便于检索,但通过前面输入输出流的方法逐一对对象的属性信息进行操作,很繁琐并容易出错,而序列化提供了轻松解决这个问题的快捷方法. ...

  4. Linux系统时钟的更改

    linux系统时钟有两个,一个是硬件时钟,即BIOS时间,就是我们进行CMOS设置时看到的时间,另一个是系统时钟,是linux系统Kernel时间. 查看.设置硬件时间: 查看系统硬件时钟 hwclo ...

  5. Linux centos7. 配置安装Oracle

    oralcle 11g r2 配置一下前期的网络环境 一 修改linux核心配置 1.修改用户的SHELL限制vi /etc/security/limits.conf oracle soft npro ...

  6. bananapi+OLED做的一个打地鼠游戏，c语言编程

    说明一下:BPI是对拍死的BPI的计数,对应最终的成绩RANK是难度 数值越低难度越高 每当打死10个BPI以后就会减一即难度高一级 默认初始化RANK等于15 DIE是存在的BPI数量,一旦数量大于 ...

  7. 解决Kubelet Pod启动CreatePodSandbox或RunPodSandbox异常方法

    新装Kubernetes,创建一个新Pod,启动Pod遇到CreatePodSandbox或RunPodSandbox异常.查看日志 # journalctl --since :: -u kubele ...

  8. [UE4]Native Widget Host

    一.Native Widget Host是一个容器,它可以包含一个Slate UI 二.Native Widget Host应该用在当你需要把一个Slate UI 放到UMG中的时候,只有这个时候才需 ...

  9. Android Studio2.0 教程从入门到精通Windows版

    系列教程 Android Studio2.0 教程从入门到精通Windows版 - 安装篇Android Studio2.0 教程从入门到精通Windows版 - 入门篇Android Studio2 ...

  10. mysql修改用户密码的方法及命令

    方法1: 用SET PASSWORD命令 首先登录MySQL. 格式:mysql> set password for 用户名@localhost = password('新密码'); 例子:my ...