flex-basis和width

转载

mb5ffbc8f4a5a17 2021-01-18 12:48:53

今天遇到一个问题给一个按钮添加width怎么都不生效，看来对flex中使用width还是一窍不通啊..

flex-basis

The flex-basis CSS property sets the initial main size of a flex item. It sets the size of the
content box unless otherwise set with box-sizing.
对一个flex item(弹性元素)设置初始的尺寸(此处既没说宽度也没说高度，只是说初始尺寸哦),
如果没有设置box-sizing的话，它将定义content-box的大小
(言外之意就是如果box-sizing设置了border-box那么，flex-basis设置的是border-box的大小)复制代码

width

设置元素的宽度

flex-basis和width基本的区别

width设置的一定是宽度，flex-basis不一定, 它的尺寸根据flex-direction的值改变，不变的是它的尺寸永远定义在主轴上。
width作用在block元素上，对于inline元素则不适用(如果span是flex item 此条无效), flex-basis只能作用在flex item上
width设置宽度生效之后，元素的宽度不会随内容的变化而变化(如果是flex item此条无效), flex-basis设置之后不见得尺寸就是设置的尺寸

好吧...我写不下去了，width在flex-container中简直就是捡来的, 而且 flex-basis 设置了好像也没啥用，都是不确定的...

这才是flex的魔力，弹性嘛，那里面如何布局就得根据内容动态改变，互相挤一挤就过去了... 所以flex的属性，都是为了约束弹性的规则，而不是约束固定的空间和排版

如何正确认识flex-basis和width

下面所有图中: 带绿框的兄弟是flex-item, 带红框的兄弟是flex-container

场景1 flex容器宽度足够的情况下

flex-basis和width_flex-basis 可见flex-basis和width都还是很有作用的，都起到了约束flex-item宽度的作用

场景2 又挤进来几个兄弟，但是空间还够

flex-basis和width_width_02 发现挤进来之后，每个元素的宽度是相等的，但是已经没那么身宽体胖了, 各自所占的区域进行了平均的挤压，导致被四等分了。

也就是说，在容器宽度饱和的情况下，width和flex-basis都会平均压缩，并不在乎你的内容有多少，此处flexBasis要比width占用空间宽，但是依然占用了一样的宽度

场景3 有一个flexBasis兄弟胖了好多, 剩余的空间还挺多的。

flex-basis和width_width_03

特点: 某一个flex item宽度打破均衡的时候, 会挤压另外3个兄弟，但是另外3兄弟还好，宽度还是平均的

场景4 有一个flexBasis兄弟又胖了好多, 没有剩余空间了

flex-basis和width_width_04

第一个兄弟为其他3兄弟保留的颜面，但是已经把空间榨干净了，这时候和只有一个兄弟的时候相比，宽度超出了flex-basis最初的设定，也就是说flex-basis只在flex容器空间充足并且自己的内容不足以撑起这个空间的时候的尺寸。形象一点:大概就是你有一个10米宽的床，你睡觉只能占1米，但是flex-basis可以让你在5米的宽度内打滚。

场景5 有一个flexBasis兄弟实在太胖了，已经挤不下了

flex-basis和width_width_05 时候flex-item宽度还是我行我素，只是容器撑不住了，而且发现这时候width容器最小也是可以展示文本的宽度的，其实被挤出去的flex-basis也是一样，保留了男人最后一点尊严，只不过容器不行了。形象一点: 你有一个10米的床，第一个哥们占了8米，第二个兄弟睡床边了，后面两个兄弟被挤到地上了，但是还是占了他们能睡觉的宽度，只不过没有打滚的空间了。