フレックスレイアウトで遭遇するいくつかの落とし穴

1. Flex Layout サブ要素には、左側に固定幅、右側に適応幅があり、右側のコンテンツが幅を超えると、左側の幅が引き伸ばされます。

<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>

 幅 500 ピクセルのボックスでは、左側の幅が 200 ピクセルの固定幅で、右側の flex:1 が適応型であることがわかりますが、そのサブ要素の幅が 400 ピクセルに設定されている場合、それを超えています。残りの最大幅 300px このとき、左側の幅が影響を受けます。

解決：

。右{

     width:0; //または min-width:0

} 問題を解決できます

設定することもできます 

。左{

    flex: 0 0 auto; //または flex-shrink: 0;

}

2. フレックスレイアウトではテキスト省略が失敗する

<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{     表示: フレックス;     幅: 500ピクセル;     高さ: 200ピクセル;     ボーダー: 1px ソリッド #000;     .text{         オーバーフロー: 非表示;         テキストオーバーフロー: 省略記号;         ホワイトスペース: ナラップ;     } }