什么是弹性盒模型?
弹性盒模型是指在父级改变大小的时候内部的自己元素也会相应的改变大小,即子集会按照父级的大小按比例自适应大小。 弹性盒模型的提出可以解决一些响应式布局的需求
 
如何使用弹性盒模型?
建立弹性盒模型: 给父级设置css属性display: flex; 即可。
若子集宽度大于父级宽度则子集会整体压缩或者给子集设置css属性flex-shrink: 1;浏览器会根据flex-shrink的比值进行按比例缩放。
若子集宽度小于父级宽度则可给子集设置flex-grow: 1;浏览器会根据flex-grow的比值按比例扩大,将剩余部分分布给子集元素
 
在弹性盒模型中,我们把父级叫做容器 子集叫做项目
 
 
弹性盒模型中项目有哪些可设置的css属性?
1.flex-shrink: 设置缩小比例 默认子集的该值均为1
案例:
代码:
 
效果:
分析:父级宽度: 500px 子集正常宽度每一个为300px 三个子集即需要父级900px的空间,但是父级宽度只有500px因此子集需要压缩400px,子集设置了flex-shrink,压缩比例为demo1:demo2:demo3 = 1 : 2 : 3;即 压缩的400px将分成6份每一份为66.6666 即demo1需要减掉66.6666 , demo2需要减掉 133.3333, demo3要减掉199.9999,即demo1剩余部分为 300 - 66.6666 = 233.3334px , demo2剩余部分为 300 - 133.3333 = 166.6667, demo3剩余部分为 300 - 199.9999 = 100
 
2.flex-grow: 设置扩大比例
不加flex-grow属性时默认flex-grow: 0;
案例代码如下
 
效果:
 
 
添加flex-grow属性之后的代码:
 
 
效果:
分析:父级宽度: 500px 子集正常宽度每一个为100px 三个子集即需要父级300px的空间,父级宽度500px超出子集200px,子集设置了flex-grow会按比例分配剩余的200px,分配比例为demo1:demo2:demo3 = 1 : 2 : 3;即 剩余的200px将分成6份,每一份的宽度为33.3333px;demo1将分配33.3333px, demo2将分配 66.6666px, demo3将分配99.9999px, 即demo1的宽度变为: 100px + 33.3333px = 133.3333px, demo2的宽度变为 100px + 66.6666px = 166.6666px , demo3的宽度变为 100px + 99.9999px = 199.9999px。
 
 

欢迎加入web前端冲击顶级高薪大厂学习群,群聊号码:820269529

css3之弹性盒模型初探(一)的更多相关文章

  1. CSS-3 新弹性盒模型属性

    flex 语法:flex:none | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 取值: none:none关键字的计算值为: 0 0 au ...

  2. css3之弹性盒模型(Flex Box)

    CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...

  3. css3中 弹性盒模型布局之box-flex

    box-flex:也就是让子容器针对父容器的宽高属性依照一定的规则来划分 Eg: html代码: <div class="wrap"> <div class=&q ...

  4. CSS3 中弹性盒模型--容器的属性

    1.display : flex | inline-flex注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性 将失效. 2.flex-direction ...

  5. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  6. css3弹性盒模型(Flexbox)

    Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当 ...

  7. 详解css3弹性盒模型(Flexbox)

    目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex ...

  8. css3弹性盒模型

    一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目 ...

  9. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

随机推荐

  1. python3入门之赋值语句介绍

    获得更多资料欢迎进入我的网站或者 csdn或者博客园 本节主要介绍赋值语句,以及几种特殊的赋值.下面附有之前的文章: python3入门之print,import,input介绍 python入门之字 ...

  2. 条目二十一《总是让比较函数在等值情况下返回false》

    条目二十一<总是让比较函数在等值情况下返回false> 这条目对序列容器是不适合的,因为序列容器就是通过等值判断来比较的. 对于关联容器来说,比较是等价比较,所以要注意等值的时候,比较子的 ...

  3. jenkins定时

    分别的定义为:分 时 天 月 星期 Minutes within the hour (0–59) HOUR       Thehour of the day (0–23) DOM         Th ...

  4. 牛客 Wannafly挑战赛27 D 绿魔法师

    传送门 \(\color{green}{solution}\) 分析下,在\(1e5+1\)内,一个数的约数个数最多为\(2^{6}\)个,所以我们可以考虑枚举约数 复杂度\(O(N^{2^{6 \t ...

  5. EntityFrameworkCore 数据库生成与迁移

    EntityFrameworkCore code first 中数据库不再自动生成,而要手动执行数据迁移相关命令生成. 由于云数据库的安全限制,没有开放公网数据库远程连接端口导致数据库生成命令无法执行 ...

  6. V1-bug Alpha阶段发布说明

    V1-bug Alpha阶段发布说明 欢迎使用WEDO创意社区(部署IP为:60.205.230.0) WHAT'S WEDO 这是一个致力于创意发布.合作开发的网站. 模块 功能 注册 添加新账号 ...

  7. 问题记录——com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure

    最近在搞一个Spring boot + Mybatis + Mysql的项目,用Mybatis访问数据库时,报了如下的错误,先在网上搜索了,试了各种办法都不行, 奇葩的是,连接另外1个数据库又没问题. ...

  8. FileUpload.PostedFile 为null异常 NullReferenceException

    FileUpload控件PostedFile属性总是为null,提示有异常NullReferenceException.我的程序中加了UpdatePannel控件.把UpdatePannel去掉之后就 ...

  9. Google Map API抓取地图坐标信息小程序

    因为实验室需要全国城市乡镇的地理坐标,有Execl的地名信息,需要一一查找地方的经纬度.Google Map地图实验室提供自带的查找经纬度的方法,不过需要一个点一个点的手输入,过于繁琐,所以自己利用G ...

  10. display:inline-block会出现的问题

    用一个父元素包裹三个子元素,将父元素的white-space设置为nowrap;这样子元素就会排在父元素中而不会换行了,通过这种方式,我们也就可以在移动端使用包裹元素的margin值实现类似的单页应用 ...