首页 > 代码库 > flex 整理 笔记
flex 整理 笔记
flex 会影响float吗？
设为Flex布局后，子元素的float、clear、vertical-align属性将失效。
flex的两个核心概念：容器 和 轴
容器具有这样的特点：父容器可以统一设置子容器的排列方式，子容器也可以单独设置自身的排列方式，如果两者同时设置，以子容器的设置为准。
父容器：
主轴上如何分布 justify-content: center \ flex-start \ flex-end \ space-around \ space-between
交叉轴上如何分布 align-items: center \ flex-start \ flex-end \ baseline \ stretch （子没有设高度）
子元素：
flex-grow:
flex-shrink:
flex-basis:
flex: 一个有单位：flex-baseis 一个没单位：flex-grow
flex-grow flex-shrink flex-basis
如果父级的空间足够：flex-grow有效，flex-shrink无效。
如果父级的空间不够：flex-shrink 有效，flex-grow无效
flex-basis
相当于是width，可以设置具体的数值，
如何和width冲突，听flex-basis的；
flex-grow
当父元素的宽度大于他的所有子元素的的宽度总和的时候，才会生效；
不设置默认是0，表明自己不参与索取，剩下的空间和它没有关系；
不为flex:0 的元素将瓜分剩下的元素，瓜分的大小，是其flex-grow的值占所有flex-grow的值的比例；
flex-grow和width 可以同时设置，flex-grow 可以设置任意的数字；
父元素宽400px，有两子元素：A和B。A宽为100px，B宽为200px。则空余空间为 400-（100+200）= 100px。如果A，B都不索取剩余空间，则有100px的空余空间。如果A索取剩余空间:设置flex-grow为1，B不索取。则最终A的大小为 自身宽度（100px）+ 剩余空间的宽度（100px）= 200px如果A，B都设索取剩余空间，A设置flex-grow为1，B设置flex-grow为2。则最终A的大小为 自身宽度（100px）+ A获得的剩余空间的宽度（100px (1/(1+2))）,最终B的大小为 自身宽度（200px）+ B获得的剩余空间的宽度（100px (2/(1+2))）
flex-shrink
当父元素的宽度小于他的所有子元素的的宽度总和的时候，才会生效；
不设置默认是flex-shrink=1，会同比缩小；设置了flex-shrink 为0的元素不参与上缴空间；
设置了flex-shrink 不为1的元素将被上缴空间；
如何消化 ？ 首先是每个项目的
wdith值乘以flex-shrink值求积，A：(155 * 2) = 310
B：(200 * 1) = 200
C：(50 * 1) = 50。
然后再求和所有项目的乘积。
(310 + 200 + 50) = 560
得到求占比之后还要乘以要腾出的空间。
A：(310 / 560) * 105 = 58.125
B：(200 / 560) * 105 = 37.5
C：(50 / 560) * 105 = 9.375
得到每一项要腾出的空间後然後
A：(155 - 58.125) = 96.875
B：(200 - 37.5) = 162.5
C：(50 - 9.375) = 40.625
好了，这样就得出计算后的宽度了。
每一个元素都求出 宽度 * flex-shrink 占各个元素 宽度 * flex-shrink 总和的比例，这个比例去认领不足的空间；
https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb
null
flex 整理 笔记
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。