问题:
-
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
-
如果缩减系数flex-shrink为0,那么元素就是100px,表现为超出父盒子
-
如果缩减系数flex-shrink不为0,元素的最终宽度也要少于100px
-
如果100px小于总宽度,那么去掉flex-basis就是剩余空间
-
如果100px大于总宽度,那么没有剩余空间
-