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。因为多数情况,我们都是在默认值上修改,其他再不容易记的东西,也会有了参照而变得游刃有余。
上述五种情况的作用及表现什么?
父盒子设置为弹性盒,子元素默认就为initial,一般用于还原默认值
表现为不会随之增大,会随之减小,宽度参照自身
一般用于等分(分配剩余空间后,表现为等分)
表现为会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间前)
不常用
表现为不会随之增大,会随之减小,宽度内容区最小宽度(分配剩余空间后)
一般用于文字越长,元素越宽的场景
表现为会随之增大,会随之减小,宽度参照自身
一般用于保持元素自身宽度,且文字不换行
表现为不会随之增大,不会随之减小,宽度参照自身
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(弹性盒可缩减为前提条件)一样吗?
首先说结论,不一样!!!
剖析一下,有以下两种情况:
元素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
本文作者:lupulus
本文链接:https://www.cnblogs.com/yuyunhao/archive/2022/04/03/16094927.html
最近在搞微信小程序,发现flex下使用省略号是没有效果的,而且还会打乱预期的结构,查询statckoverflow知道需要在父级设置min-width:0; 但是在我的尝试下,依然不行,原来在上层父级就是flex那一级别也需要设置 min-width:0
在低版本的手机系统中,我们发现 button 不能够作为 flex 容器,即使在 CSS 中指定了 display: flex 且 autoprefixer 也已经转换成兼容属性,也还是不起作用。具体表现在其内容并不能使用 flex 布局对齐,比如说居中。
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!