极客观点
项目管理
HarmonyOS
设置 flex: 1 1 0 等于没设置 flex-basis 吗？
看到这个文章：https://zhuanlan.zhihu.com/p/39052660
flex-basis 是 0 就是 没设置？
但是当我设置为 0 的时候，和设置 auto 效果是不一样的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
/* 在小尺寸屏幕上媒体查询 */
@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;
}
</style>
</head>
<body>
<div class="container">
<div class="image"></div>
<div class="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing
elit啥的那是打卡黑色的哈萨克傻傻的卡萨帝哈萨克肌肤会撒可富还几号放假喀什市撒娇客户放假卡还是分开就爱上客服哈市副卡司法局开始发货. Sed consequat placerat lorem.</p>
</div>
</div>
</body>
</html>设置为 flex: 1 1 0 的时候，我的图片宽度是正常的 200
但是，设置为 flex: 1 1 auto 的时候，我的图片宽度被挤压了！！！
为什么呢？什么原理？
前置知识
flex-basis就相当于width(flex-direction: row)或height(flex-direction: column;)。flex默认值（不显式设置时）
情况一 照片flex使用默认值，
.text的flex-grow设置为1flex-basis(auto)计算值就是它的宽度200px，.text元素的flex-basis(auto)就是它的最大内容宽度，就是那些文字在一行上显示时的宽度。flex-shrink: 1，故此时的照片的大小不再保持200px，而是变小。.text元素通过使文字换行来缩小它的宽度。情况二 照片flex使用默认值,将
.text元素的flex-basis改为0，flex-grow改为1flex-basis(auto)计算值就是它的宽度200px, .text元素的flex-basis就是0。text元素的宽度会小于其父元素的宽度，然后增加元素的宽度。照片的flex-grow: 0,不会增加它的宽度。.text元素的flex-grow: 1,会增加它的宽度直到充满剩余空间，即父元素的content-width - img.width, 由于文字可以换行，所以没有溢出（如果有比较长的单词，还是可能会溢出的）。