我测试的时候发现

只设置flex:1的话 flex-basis的值不是auto 而是0% 老师是不是讲错了呢

而且设置flex:1的话再设置宽度就没效了剩余空间不会先减去设置的宽度我想也是由于设置了flex:1而导致flex-basis为0，从而width失效吧

<!DOCTYPE html>

<html>

<head>

<title>Document</title>

<style>

#box{

display: flex;

}

#box div{

flex:auto;

text-align: center;

background-color: red

}

#box div:first-child{

width: 100px

}

</style>

</head>

<body>

<div>顶顶顶顶顶</div>

</div>

</body>

</html>

源自：移动Web开发入门 3-12 flex布局-项目的属性

收起

1回答

好帮手慕慕子 2019-07-30 19:19:12

同学你好，老师这里说flex-basis的默认值是auto哦，参考下图理解就是如果没有指定flex-basis的值，那么这个值是由内容来决定的

同学的意思如下图所示的设置flex：1；吗？

如果是这样的话，你这里设置flex：1；之后，弹性盒模型对象的所有子元素都有相同的长度，且忽略它们内部的内容, 所以此时flex-basis的值就是0%哦

如果不是指这里的话，建议：可以详细的描述一下指的是哪里，再次提问，我们会继续为你解答的

如果帮助到了你，欢迎采纳！

祝学习愉快~~~

提问者慕函数0414863 #1

因为视频中说flex:1 等于flex:1 1 auto 但是我发现flex-basis是0而不是auto 如果设置flex:1 同时设置flex-basis为auto 那么控制台查看flex-basis就是auto 所以我理解的是flex:1 这个缩写等同于 flex:1 1 0 比如我的代码中只设置flex:1 同时设置子元素width:100 那这个width不会生效剩余空间就是全部的空间但是如果设置flex:1 同时设置flex-basis:auto 那么width就会生效剩余空间会剔除这个width 或者就算没有width也会把元素内文字自身的宽度剔除然后在分配剩余空间

2019-07-30 19:51:58
好帮手慕慕子回复提问者慕函数0414863 #2

同学你好，对于你说的视频中老师讲解的问题，我们会尽快审核的，如果确实有问题，我们之后会针对视频做出调整的，祝学习愉快~~~

2019-07-31 11:55:06