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. Linq 查询多张表,关系表

    项目中遇到一个问题, 有4张表, 然后相互之间有3张关系表关联, 一共七张表. 想要从顶层表查询最底层表的记录,不能写7层嵌套. 用Linq实现特别简单,  表:User,Role,Module,Fu ...

  2. 排名Top 16的Java实用类库

    (转载: http://www.hollischuang.com/archives/1606) github地址: https://github.com/liufeiSAP/javaStudy.git ...

  3. node.js setup wizard ended prematurely Win7安装nodejs失败解决方法

    笔记本win7在nodejs官方网站下载.msi文件安装,安装到一半的时候,进度条提示:roll back,because of a error.node.JS setup wizard ended ...

  4. Matcher的group()/group(int group)/groupCount()用法介绍

    直接上代码: package com.dajiangtai.djt_spider.util; import java.util.regex.Matcher;import java.util.regex ...

  5. SQL 分组获取产品 前两条记录

    select * from ( select *, ROW_NUMBER() over(partition by IPAddress order by recordtime desc) as rowN ...

  6. 通过ssh X11转发使用远程gui程序

    ssh协议可以转发X11数据, 从而达到使用远程gui程序的功能, 假定现在有 客服端 C :192.168.0.13 服务器 S :192.168.0.200 首先确保在客服端C 上能够通过 ssh ...

  7. GoWeb开发_Iris框架讲解(一)

    Golang介绍 Go语言是谷歌推出的一种全新的编程语言,可以在不损失应用程序性能的情况下降低代码的复杂性.谷歌首席软件工程师罗布派克(Rob Pike)说:我们之所以开发Go,是因为过去10多年间软 ...

  8. 基于SpringBoot构建分模块项目

    前言 步骤过于详细,多图慎入!!! 假设一个场景,要开发一个4s店维修部的办公系统,其功能有:前台接待,维修抢单,财务结算,库存管理.于是我们创建一个项目balabalabala写完交工. 一段时间后 ...

  9. python 扩展注册功能装饰器举例

    db_path='db.txt'def get_uname(): while True: uname=input('请输入用户名:').strip() if uname.isalpha(): with ...

  10. vue路由的四种传值

    第一种:props 配置: 组件内定义: props: ['id'] 路由映射配置,开启props:true : { path: '/user/:id', component: User, props ...