flex属性解决子元素宽度被压缩问题
问题
如上图所示, A 及 B 的 父盒子 是 C。其中 C 和 B 都用到了 flex 布局,目的是使文字水平对齐。
css 代码
// A 及 B 的父盒子
.cur-in-stan {
color: red;
height: 37px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
margin-right: 10px;
// B 盒子
.cur-in-stan-name {
display: flex;
align-items: center;
max-width: 100px;
}
}
其中 B 设置了 max-width: 100px
。但当 B 中的文本内容宽度小于 100px
时(如下图所示),会导致 A 样式错乱。
分析
需求:让 A 占据宽度不变,B 最大宽度为 100px
,B 中的文本宽度若超过 100px
则以省略号显示,鼠标悬浮显示完整内容。
若把 B 的 max-width: 100px
改为 width: 100px
,不会发生上述 A 样式错乱的情形,但是会导致 B 宽度过大,与后面元素的间隔太大(如下图所示)。因此,B 必须要有 max-width
。
进一步分析
B 有 max-width
,为什么会导致 A 样式错乱 ?
- 当 B 没有固定宽度,只有最大宽度时,且 B 中的文本宽度小于最大宽度时:B 的宽度等于 B 中文本的宽度。
- A 没有设定宽度。A 及 B 的父盒子也没有设定宽度。
- 因此,A 及 B 的宽度都靠内部文本宽度撑起来。
- 结论:由于父盒子宽度不够,A 的宽度会被压缩
解决方案
效果
方案一(推荐): 给 A 设置 flex-shrink: 0
,则 A 的固定宽度不会被压缩
给 A 设置 `flex-shrink: 0`
.cur-in-stan {
color: red;
height: 37px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
margin-right: 10px;
// A 盒子
.label {
flex-shrink: 0;
}
// B 盒子
.cur-in-stan-name {
display: flex;
align-items: center;
max-width: 100px;
}
}
方案二:给 B 设置 flex: 1
,让 B 中的文本撑满 flex 容器剩余空间
如果Flex容器中仅有一个项目设置了
flex: 1
,那么这个项目的大小将填充整个Flex容器,并且在容器内不会留下任何空间。
给 B 设置 `flex: 1`
.cur-in-stan {
color: red;
height: 37px;
font-size: 14px;
font-weight: 700;
display: flex;
align-items: center;
margin-right: 10px;
.cur-in-stan-name {
display: flex;
align-items: center;
max-width: 100px;
// 让 B 中的文本撑满 flex 容器剩余空间
flex: 1;
}
}
分析 flex 属性
flex: 1
是以下内容的简写:
让该Flex项目在 Flex 容器中平均分配剩余的可用空间(如果有剩余的话)
flex-grow: 1; // 放大比例设置为 1,所以它会占据可分配空间的相同份额
flex-shrink: 1; // 在 Flex 容器宽度不足时,它会缩小
flex-basis: 0; // 确保该项目的最小大小为 0
以下为这三个属性的默认值:
参考链接:
本文来自博客园,作者:shayloyuki,转载请注明原文链接:https://www.cnblogs.com/shayloyuki/p/17631959.html
posted on 2023-08-15 17:52 shayloyuki 阅读(1685) 评论(0) 编辑 收藏 举报