flex弹性布局,如果子元素宽度之和大于或者小于父元素宽度,空间就会存在剩余和不够,flex默认不换行,除非设置flex-wrap,那么这种情况下,有两个重要的属性,flex-grow和flex-shrink.

flex-grow默认值为0,用于子元素的宽度之和小于父元素的宽度时分配剩余空间,假如父元素宽度为1000,三个子元素,div1宽度200,div2宽度300,div3宽度300;三个子元素都不设置flex-grow,那么浏览器默认不自动分配剩余空间,剩余空间超出;假如给div1设置flex-grow:1,那么剩余1000-200-300-300=200px全部分配给div1;其他的子元素div2和div3不参与分配,即不设置此属性就不参与分配。

所以如果要参与分配,就要给子元素添加flex-grow属性。如果按照1:1:1,那么剩余空间就分成3等份,每个子元素分1/3,也可以设置2:2:2或者3:3:3,,但是结果和1:1:1是一样的,都是平均分配,没有意义。如果按照2:3:1,那么剩余空间分成6等份,每个子元素按照2/6,3/6,1/6去分配。

flex-shrink和flex-grow相反,默认值为1,子元素宽度之和超出父元素宽度,那么每个子元素就要按比例缩小以适应父元素。这时候给子元素设置flex-grow不起作用。即使不给子元素设置flex-shrink,浏览器也会根据子元素在子元素宽度之和的占有比例去缩小每个子元素,假如

父元素宽度600,div1宽度200,div2宽度300,div3宽度300,超出父元素200+300+300-600=200,这200在默认情况下浏览器会按比例给每个子元素均分减少,默认比例怎么算呢?先算出每个div占所有div宽度之和多少,上面三个div之和为800,那么三个div所占比例为:

div1:200/800=0.25

div2:300/800=0.375

div3:300/800=0.375

那么超出的200就按照上面这个比例去分配,所有div1宽度要减少200*0.25=50,div2减少200*0.375=75,div3减少200*0.375=75;所以即使不给子元素添加flex-shrink,浏览器最后会把三个子元素宽度缩小到150,225,225;如果想自定义减小某个子元素宽度,就要给相应的div设置flex-shrink, 其他不缩小的设置flex-shrink:0;

对flex-grow和flex-shrink的深入理解的更多相关文章

  1. flex 1与flex auto

    flex意为"弹性布局" 这次主要探究的是flex:1与flex:auto的区别,flex是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 ...

  2. 杂项:flex (adobe flex)

    ylbtech-杂项:Flex (Adobe Flex) Flex指Adobe Flex,基于其专有的Macromedia Flash平台,它是涵盖了支持RIA(Rich Internet Appli ...

  3. flex:1和flex:auto详解

    flex:1和flex:auto详解 首先明确一点是, flex 是 flex-grow.flex-shrink.flex-basis的缩写. flex-grow属性定义项目的放大比例,默认为0,即如 ...

  4. flex html 用flex展示html

    1. 目的 flex展示html 可以保护网页内容 2. 参考 http://stackoverflow.com/questions/260270/display-html-in-an-actions ...

  5. 微信小程序开发之搞懂flex布局2——flex container

    容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...

  6. 微信小程序开发之搞懂flex布局3——Flex Item

    Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...

  7. Flex外包公司——Flex案例展示

    Flex案例展示 做的mail系统:  http://gowebtop.com/webtop/ 在线购书网站  http://book.orzar.net/ eBay购物网站  http://www. ...

  8. [Flex+JAVA]建立Flex+java项目,并实现基本功能

    1新建JAVA WEB项目 新建后的web文件包截图 3添加Flex项目,右键,添加.更改项目类型,天剑Flex项目类型

  9. (转)Flex开发工具Flex Builder 3 下载及注册码

    本文转载自:http://blog.csdn.net/wlxtaking/article/details/5779762 Flex是通过java或者.net等非Flash途径,解释.mxml文件组织c ...

  10. 重新总结flex布局(flex,flex-direction,justify-content,align-items,flex-wrap,align-self)

    1.flex,主要就是按比例分配.(例如:两个div的flex:1,就大小相等) .box1{ flex:1; background-color: red; } .box2{ flex:1; back ...

随机推荐

  1. Oracle数据库导入、导出(远程、10g、11g)

    1  查看oracle的版本信息 (1)用客户端连接到数据库,执行select * from v$instance             查看version项 (2)select * from pr ...

  2. SpringMVC之四:渲染Web视图

    理解视图解析 在前面的例子中,我们看到控制器返回的都是一个逻辑视图的名称,然后把这个逻辑视图名称交给view resolver,然后返回渲染后的 html 页面给 client. 将控制器中请求处理的 ...

  3. QT时钟绘制

    Demo的效果 资源占用还能接受 运行久一点内存就下去了 下面是Demo的代码 #include "mainwindow.h" #include "ui_mainwind ...

  4. #if _MSC_VER > 1000 #pragma once #endif

    #if _MSC_VER > 1000 #pragma once #endif 解释: 这是微软的预编译控制. 在_MSC_VER较小时,它对一些东西的支持与新版不同 _MSC_VER分解如下: ...

  5. poi解析Excel(转)

    下面是本文的项目结构: 项目中所需要的jar文件: 所用的Excel数据(2003-2007,2010都是一样的数据) 运行效果: /Excel2010/src/com/b510/common/Com ...

  6. SSM之全局异常处理器

    1. 异常处理思路 首先来看一下在springmvc中,异常处理的思路:   如上图所示,系统的dao.service.controller出现异常都通过throws Exception向上抛出,最后 ...

  7. c/c++语言实现tesseract ocr引擎编程实例

    编译下面的程序操作系统必须在安装了tesseract库和leptonica库才可以 Basic example c++ code: #include <tesseract/baseapi.h&g ...

  8. 5、opencv中的绘图函数

    1.目标 a.学习使用 OpenCV 绘制不同几何图形 b. 你将会学习到这些函数: cv2.line(), cv2.circle(), cv2.rectangle(),cv2.ellipse(),c ...

  9. day02-HTML(2)

    一.新知识 1.  !+tab   html5的标签结构   2.  Charset   编码 Ascll Ansi Unicode Gbk Gb2312 Big5 Utf-8   通用字符集 3.关 ...

  10. 异步和多线程,委托异步调用,Thread,ThreadPool,Task,Parallel,CancellationTokenSource

    1 进程-线程-多线程,同步和异步2 异步使用和回调3 异步参数4 异步等待5 异步返回值 5 多线程的特点:不卡主线程.速度快.无序性7 thread:线程等待,回调,前台线程/后台线程, 8 th ...