flex这些问题应该被理解
flex三连问,帮助我们更好的理解布局利器
问题:
- flex的值 auto, none, 0, 1, initial分别是什么?有什么作用?有什么表现?
- flex-basis和width的区别?单值flex-basis:0与auto的区别?flex-basis:100px与width:100px一样吗?
- 怎样理解剩余空间?
解决:
问题一:
flex的值 auto, none, 0, 1, initial分别是什么?
成都创新互联服务项目包括泸州网站建设、泸州网站制作、泸州网页制作以及泸州网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,泸州网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到泸州省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
-
flex: auto 为 1 1 auto
-
flex: none为 0 0 auto
-
flex: 0为 0 1 0
-
flex: 1为 1 1 0
-
flex: initial为 0 1 auto
提一嘴,我认为重要的是这个flex的默认值,也就是initial。因为多数情况,我们都是在默认值上修改,其他再不容易记的东西,也会有了参照而变得游刃有余。
上述五种情况的作用及表现什么?
- flex:initial(默认值)
-
父盒子设置为弹性盒,子元素默认就为initial,一般用于还原默认值
-
表现为不会随之增大,会随之减小,宽度参照自身
- flex:1
-
一般用于等分(分配剩余空间后,表现为等分)
-
表现为会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间前)
- flex:0
-
不常用
-
表现为不会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间后)
- flex:auto
-
一般用于文字越长,元素越宽的场景
-
表现为会随之增大,会随之减小,宽度参照自身
- flex:none
-
一般用于保持元素自身宽度,且文字不换行
-
表现为不会随之增大,不会随之减小,宽度参照自身
问题二:
flex-basis和width的区别?单值flex-basis:0与auto的区别?
-
两者都是用于改变弹性盒元素的宽度
-
flex-basis比width优先级更高;
-
如果flex-basis为auto,那么元素就会参照width
-
如果flex-basis不为auto(如:0,200px等),那么元素就会忽略width(即使你设置了width),采用flex-basis的值
-
flex-basis:100px与width:100px(弹性盒可缩减为前提条件)一样吗?
-
首先说结论,不一样!!!
width:100px
+flex-basis:auto
=== 元素100px
content
+flex-basis:100px
===max
(content
,flex-basis:100px
) >= 元素100px
-
剖析一下,有以下两种情况:
-
元素flex-basis为auto时,width设为100px,那么当缩小弹性盒时,元素始终为100px,不会变化。那么如果该元素内容区宽度超过100px(比如内嵌的图片,font-size大小等),那么也不会撑大该元素,它就是个定值100px
-
元素flex-basis不为auto时,width设为多少都没用,优先取flex-basis的值。若flex-basis为100px,那么如果该元素内容区宽度超过100px(比如内嵌的图片,font-size大小等),那么与设置width结果相反,会撑大该元素,最后计算的宽度会大于100px。
-
-
width就是写死,无论怎么变,该元素就是这么宽;flex-basis意思是,元素大概是这么宽,如果有意外情况,那么我还会改变。
-
举个小栗子帮助理解下:你晚上在加班,女朋友要让你陪她一个小时,但是女人的嘴,骗人的鬼,指不定耽误多长时间呢。然后。。。
-
width的理解:我是个负责任的男人,一个小时一分不多一分不少,不会因为任何说法改变这一个小时。
-
flex-basis的理解:女朋友比任何事都重要,如果她不闹腾,那么一个小时就准时结束,否则,我只能由着她的性子来了。唉,折腾到明早也有可能,没办法,谁让她最重要呢?
-
-
问题三:
怎样理解剩余空间?
-
开启弹性盒的元素的宽度为总空间
-
去掉所有子元素的固定宽度后,剩余的空间就叫做剩余空间
-
子元素有width属性,那么去掉width就是剩余空间
-
子元素有flex-basis:100px
-
如果100px小于总宽度,那么去掉flex-basis就是剩余空间
-
如果100px大于总宽度,那么没有剩余空间
-
如果缩减系数flex-shrink为0,那么元素就是100px,表现为超出父盒子
-
如果缩减系数flex-shrink不为0,元素的最终宽度也要少于100px
-
-
网页题目:flex这些问题应该被理解
网站路径:http://scyanting.com/article/dsojeid.html