flex布局遇到的一些坑记录

最新推荐文章于 2024-09-04 17:39:11 发布

原创最新推荐文章于 2024-09-04 17:39:11 发布 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

文章讲述了在Flex布局中遇到的两个常见问题：一是右侧内容超出导致左侧宽度被挤压，解决方案是设置.right的width为0或min-width:0，或者设置.left的flex-shrink:0；二是文本省略失效，解决方法是给内容加一层标签并应用overflow、text-overflow和white-space样式。

1.flex布局子元素左侧固定宽度，右侧宽度自适应，当右侧内容超出时会拉伸左侧宽度

<template>
	<div class="box">
		<div class="left">123</div>
		<div class="right">
			<div class="text">内容</div>
		</div>
	</div>
</template>

<script>
</script>

<style lang="less" scoped>
.box{
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid #000;
	overflow: hidden;
	.left{
		width: 200px;
		background-color: red;
	}
	.right{
		flex: 1;
		background-color: green;
		.text{
			width: 400px;
		}
	}
}	
</style>

可以看到在宽度为500px的盒子里，左侧宽度为固定宽度200px,右侧flex:1自适应，但是当其子元素宽度设为400px时已经超出剩余最大宽度300px,此时左侧宽度受到挤压

解决办法：

.right{

width:0； //或者min-width:0

} 都能解决问题

也可以设置

.left{

flex: 0 0 auto; //或者 flex-shrink: 0;

}

2. flex布局会导致文本省略失效

<template>
	<div class="box">
		内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
	</div>
</template>

<script>
</script>

<style lang="less" scoped>
.box{
	display: flex;
	width: 500px;
	height: 200px;
	border: 1px solid #000;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}	
</style>

解决办法加一层标签

.box{
   display: flex;
   width: 500px;
   height: 200px;
   border: 1px solid #000;
   .text{
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
   }
}