深入理解flex布局的flex-grow、flex-shrink、flex-basis
flex-basis用来设置初始的宽度(或者高度),优先级高于width
flex-grow用来设置flex容器内 当还有剩余宽度(或高度)时, 子元素的缩放比例。
同理 flex-shrink 用来设置flex容器内,当子元素的总宽度(或高度)超出父级容器宽度(或高度)时,子元素收缩的比例。
原文: https://zhuanlan.zhihu.com/p/39052660
-------------------------------
在使用 flex 布局的时候大家难以理解的是 flex-grow、flex-shrink、flex-basis 几个属性的用法,下面通过几个例子来演示。
flex-basis
flex-basis 用于设置子项的占用空间。如果设置了值,则子项占用的空间为设置的值;如果没设置或者为 auto,那子项的空间为width/height 的值。
- 对于子项1,flex-basis 如果设置默认是auto,子项占用的宽度使用width 的宽度,width没设置也为 auto,所以子项占用空间由内容决定。
- 对于子项2,flex-basis 为auto,子项占用宽度使用width 的宽度,width 为70px,所以子项子项占用空间是70px。
- 对于子项3,flex-basis 为100px,覆盖width 的宽度,所以子项占用空间是100px。
flex-grow
用来“瓜分”父项的“剩余空间”。
容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px,子项2占用的基础空间是70px,子项3占用基础空间是100px,剩余空间为 400-50-70-100 = 180px。 其中子项1的flex-grow: 0(未设置默认为0), 子项2flex-grow: 2,子项3flex-grow: 1,剩余空间分成3份,子项2占2份(120px),子项3占1份(60px)。所以 子项1真实的占用空间为: 50+0 = 50px, 子项2真实的占用空间为: 70+120 = 190px, 子项3真实的占用空间为: 100+60 = 160px。
flex-shrink
用来“吸收”超出的空间
容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px,子项2占用的基准空间是150px,子项3占用基准空间是100px,总基准空间为 250+150+100=500px。容器放不下,多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1), 子项2 flex-shrink: 2,子项3 flex-shrink: 2。子项1需要吸收的的空间为 (250*1)/(250*1+150*2+100*2) * 100 = 33.33px
,子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为(150*2)/(250*1+150*2+100*2) * 100=40px
,子项2真实空间为 150-40 = 110px
。子项3吸收的空间为(100*2)/(250*1+150*2+100*2) * 100 = 26.67px
,真实的空间为100-26.67=73.33px
。
深入理解flex布局的flex-grow、flex-shrink、flex-basis的更多相关文章
- CSS 弹性盒子 flex的三个属性:grow、shrink、basis
flex-grow 首先介绍flex-grow属性,flex-grow会在容器太大时(图片A.B的宽度和 < 父容器宽度)对元素作出调整. 如果图片A的flex-grow属性的值为 1,图片B的 ...
- 深入理解 flex 布局以及计算_Flexbox, Layout
起因 对于Flex布局,阅读了 大漠老师和其他老师写的文章后,我还是不太理解Flexbox是如何弹性的计算子级项目的大小以及一些其他细节.在大漠老师的帮助下,我去查阅Flexbox 的 W3C 规范文 ...
- flex布局全解析
前言 很长一段时间, 我知道有flex这个布局方式, 但是始终没有去学它. 3点原因: 感觉还比较新, 担心兼容性不好. 普通的布局方式能满足我的绝大多数需求. 好像蛮复杂的. 最近由于开发需要, 学 ...
- flex布局应用
flex介绍 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 了解了flex布局之后,发现其功能非常强大. 当指定一个div dis ...
- CSS Flex布局整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- CSS Flex布局属性整理
Flex布局 display: flex; 将对象作为弹性伸缩盒展示,用于块级元素 display: inline-flex; 将对象作为弹性伸缩盒展示,用于行内元素 注意兼容问题: webkit内核 ...
- 微信小程序flex布局
一.flex布局基础 二.相对定位和绝对定位 flex的容器和元素 主轴(左-右),交叉轴(上-下) flex容器属性详解 flex-direction 决定元素的排列方向(默认row ...
- 前端flex布局学习笔记
flex布局,即为弹性布局,其为盒模型提供最大的灵活性,任何一个容器都可以指定为flex布局. eg:.box{ display:flex: } 行内元素也可以使用flex布局. 注意:设置flex布 ...
- Flex布局做出自适应页面--语法和案例
本文发布在: github项目地址:https://github.com/tenadolanter/flex-layout-demo SegmentFault地址:https://segmentfau ...
- 轻轻松松学CSS:Flex布局
Flex布局就是"弹性布局",它可以简便.完整.响应式地实现各种页面布局.引入弹性布局的目的,当页面需要适应不同的屏幕大小确保元素拥有恰当的布局方式,对一个容器中的子元素进行排列 ...
随机推荐
- 【DSP开发】利用CCS5.4开发基于DSP6455的JPEG2000图像解压缩过程
[DSP开发]利用CCS5.4开发基于DSP6455的JPEG2000图像解压缩过程 声明:引用请注明出处http://blog.csdn.net/lg1259156776/ 说明:前端是时间基于VS ...
- jqGrid刷新不取消选中
也就是说,刷新前选中的行,刷新后还是选中 var jqGrid = $("#jqGrid"); // 获取刷新前选中的行id var jqGridRowid=jqGrid.jqGr ...
- SQL入门经典(第四版)学习记录——欢迎来到SQL世界(一)
1.结构化查询语言——SQL,关系型数据库通信的标准语言: 2.关系型数据库:表的逻辑单元组成,这些表在内部彼此关联,组成了关系型数据库: 3.SQL会话:用户用SQL命令语句与关系型数据库进行交互时 ...
- 【LOJ】#2720. 「NOI2018」你的名字
题解 把S串建一个后缀自动机 用一个可持久化权值线段树维护每个节点的right集合是哪些节点 求本质不同的子串我们就是要求T串中以每个点为结束点的串有多少在\(S[l..r]\)中出现过 首先我们需要 ...
- Python 解LeetCode:606 Construct String from Binary Tree
题目描述:用先序遍历的方式把二叉树转换成字符串,其中结点用括号分割,具体示例见题目链接 思路: 先序遍历,先把根结点的值转化成字符串,然后递归的把左右子树的值转化成字符串 把1中的根结点和左右子结点的 ...
- Ribbon【入门】
公共依赖: <parent> <groupId>org.springframework.boot</groupId> <artifactId>sprin ...
- Django基础cookie和session
Django基础cookie和session 1.会话跟踪 什么是会话!可以把会话理解为客户端与服务器之间的一次会晤,在一次会晤中可能会包含多次请求和响应.例如给10086打个电话,你就是客户端, ...
- 1231: 删除字符串中指定的字符(Java)
WUSTOJ 1231: 删除字符串中指定的字符 题目 原题链接 Description 明天就要英语考试了,小明明正在挑灯夜战背单词.小明明发现单词很难背,背一个忘一个.经过仔细研究,小明明发现单词 ...
- vmstat命令详解--转载
一.前言 vmstat命令: 用来获得有关进程.虚存.页面交换空间及 CPU活动的信息.这些信息反映了系统的负载情况 二.虚拟内存运行原理 在系统中运行的每个进程都需要使用到内存,但不是每个进程都需 ...
- nacos搭建
1.下载执行包 直接官网 https://nacos.io/zh-cn/docs/quick-start.html 2. 建表 3. 启动 http://10.0.0.113:8848/nacos/i ...