设置 flex: 1 1 0 等于没设置 flex-basis 吗?-灵析社区

博学的学渣

设置 flex: 1 1 0 等于没设置 flex-basis 吗? 看到这个文章:[https://zhuanlan.zhihu.com/p/39052660](https://link.segmentfault.com/?enc=O1In71gWcGicqtOT3E2vIg%3D%3D.68YfdLfURgnZipm6vlJ%2Fd2JKlRL1xNEy6X41Jlf62Z2McHP0MM7dLloZ0WQyTTRs) ![图片.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/12a288b64bb0ae0f8d765ea1eb9c1414.png) flex-basis 是 0 就是 没设置? 但是当我设置为 0 的时候,和设置 auto 效果是不一样的 Flexbox Example /* 在小尺寸屏幕上媒体查询 */ @media (max-width: 600px) { .container { display: flex; flex-direction: column; /* 垂直布局 */ } .image { width: 200px; height: 200px; background-color: #f0f0f0; margin-right: 20px; /* 图片和文本之间的间距 */ } .text { flex: initial; /* 右侧文本占据剩余空间 */ } } .container { display: flex; /* 默认水平布局 */ } .image { width: 200px; height: 200px; background-color: #f0f0f0; margin-right: 20px; /* 图片和文本之间的间距 */ } .text { flex: 1 1 0; } Lorem ipsum dolor sit amet, consectetur adipiscing elit啥的那是打卡黑色的哈萨克傻傻的卡萨帝哈萨克肌肤会撒可富还几号放假喀什市撒娇客户放假卡还是分开就爱上客服哈市副卡司法局开始发货. Sed consequat placerat lorem. 设置为 `flex: 1 1 0` 的时候,我的图片宽度是正常的 200 ![图片.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/e70d50bac25eda6d917b72458ef36659.png) 但是,设置为 `flex: 1 1 auto` 的时候,我的图片宽度被挤压了!!! ![图片.png](https://wmlx-new-image.oss-cn-shanghai.aliyuncs.com/images/20241025/f3295299098333387f23bd52d8f820b4.png) 为什么呢?什么原理?

阅读量:15

点赞量:0

问AI
前置知识 * "flex-basis"就相当于"width(flex-direction: row)"或"height(flex-direction: column;)"。 * 当两者同时出现的时候,width的值就被忽略了。 * flex默认值(不显式设置时)flex-grow: 0; flex-shrink: 1; flex-basis: auto; 情况一 照片flex使用默认值,".text"的"flex-grow"设置为1 * 照片的"flex-basis(auto)"计算值就是它的宽度"200px",".text"元素的"flex-basis(auto)"就是它的最大内容宽度,就是那些文字在一行上显示时的宽度 。 * 文字比较长,照片和.text元素的宽度会大于其父元素的宽度,所以之后就会收缩。两者都设置了"flex-shrink: 1",故此时的照片的大小不再保持200px,而是变小 。".text"元素通过使文字换行来缩小它的宽度。 情况二 照片flex使用默认值,将".text"元素的"flex-basis"改为0,"flex-grow"改为1 * 照片的"flex-basis(auto)"计算值就是它的宽度"200px", .text元素的"flex-basis"就是0。 * 此时,照片和."text"元素的宽度会小于其父元素的宽度,然后增加元素的宽度。照片的"flex-grow: 0",不会增加它的宽度。".text"元素的"flex-grow: 1",会增加它的宽度直到充满剩余空间,即父元素的content-width - img.width, 由于文字可以换行,所以没有溢出(如果有比较长的单词,还是可能会溢出的)。