flex-basis 与 width 的区别
概念
-
flex-basis
指定了 flex 元素在主轴方向上的初始大小。如果不使用 box-sizing 来改变盒模型的话,那么这个属性就决定了 flex 元素的内容盒(content-box)的宽或者高(取决于主轴的方向)的尺寸大小。
-
width
指定了元素内容区的宽度. 内容区在元素padding,border和margin里面
区别
-
只有在容器为
display: flex
时,flex-basis
才起作用 -
flex-direction
决定了flex-basis
,只指主轴方向flex-direction: row
时,flex-basis
指的是项目的width
flex-direction: column
时,flex-basis
指的是项目的height
-
当在 flex 容器,主轴方向默认时,项目同时拥有
width
和flex-basis
,项目的宽度取决于flex-basis
,主轴方向 column 时,同样是flex-basis
决定高度 -
当项目
position: absolute
时,flex-basis
不在起作用 Absolutely-positioned flex items do not participate in flex layout. 宽度高度只和width
height
有关.container { position: relative; width: 400px; height: 200px; border: 1px solid orange; background: rebeccapurple; display: flex; flex-wrap: nowrap; align-items: flex-end; text-align: center; } .item { flex-basis: 50px; background: lightskyblue; border: 1px solid red; flex-grow: 1; text-align: center; } .item1 { position: absolute; background: plum; width: 100px; height: 100px; }
可以看到 item1 已经脱离文档流覆盖在了 item2 的上面,
flex-basis: 50px
已无作用,取而代之的是width: 100px; height: 100px;
总结
flex-basis
这个属性,前提是在 display: flex
的容器当中,主要起到的作用就是对项目的初始化大小进行 flex式 的定义,通过 flex-grow
flex-shrink
进行放大缩小的弹性表现.
建议优先使用 flex
属性,flex
属性是flex-grow
, flex-shrink
和 flex-basis
的简写,默认值为0 1 auto
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
该属性有两个快捷值:auto
(1 1 auto
) 和 none (0 0 auto
)。
本文由 Shuaiyin 创作,采用 知识共享署名4.0
国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Sep 18,2019