display:flex flex-grow

我的css学得真的好差,今天遇到一个样式搞了半天.

## 问题:

首先我需要将这两部分分为一个在右边一个在左边.这个比较简单
可以通过    display: flex;     justify-content: space-between;来实现.
 问题出在了,因为这是对半分的,所以左边和右边的width各占一半.这样会出现一个问题就是,我页面缩小的时候,我左边文字多的部分可能会被遮盖住.但是我右边还空了很多.如下图

我肯定希望我左边的宽度大一点,右边的宽度小一点.那么怎么做呢?

## 解决方法:

首先参考阮一峰大神的flex布局教程博文

可以看到flex-grow可以设置

 我的第二个难题又来了,我的css选择器学得不是很好,我不知道如何去选择第一个或者第二个,可以看到我底下的代码,后来百度了知道用的是:nth-of-type(1),因为我希望第一个li宽度大一点所以是:nth-of-type(1),括号里面为1.(可不要像我一样傻,觉得不会使用选择器就去给两个li写了class名,我已经试过了.这样不能解决根本问题.你们可以自己动手操作一下.),

注意,要设置flex-grow的那个元素不能设置宽度.我一开始也没有效果,后来发现是宽度的原因.

哦,对了.可能会有朋友还没有写vue3.0,觉得这个看着有点不太一样.这是vue3.0+ts

<template>
	<div class="abnormal-container">
		<el-card shadow="hover">
			<div class="container-head">
				<h3>异常预警</h3>
				<!-- <div>进入预警中心> -->
				<router-link  :to="'/abnormal/abnormalCenter'"> 进入预警中心> </router-link>
				<!-- </div> -->
			</div>
			<el-tabs class="container-middle" v-model="activeName" type="card" @tab-click="handleClick" style="margin-top: 10px">
				<el-tab-pane label="全部" name="first">
					<!-- 无缝滚动效果 -->
					<div class="marquee-wrap">
						 <ul class="marquee-list" v-for="(item, index) in listData" :key="index" >
							<li >{{ item.value }}</li>
							<li  style="text-align:right;">{{ item.time }}</li>
						</ul>
					</div>
				</el-tab-pane>
				<el-tab-pane label="订单" name="second">订单</el-tab-pane>
				<el-tab-pane label="设备" name="third">设备</el-tab-pane>
				<el-tab-pane label="SIM卡" name="fourth">SIM卡</el-tab-pane>
			</el-tabs>
		</el-card>
	</div>
</template>
<script>
import { toRefs, reactive, onMounted, ref, computed } from 'vue';

export default {
	name: 'abnormal',
	setup() {
		const state = reactive({
			activeName: 'first',
			timer: null,
			animateUp: false,
			listData: [
				{ value: '[设备]订单[1541354384384843584]充值失败!', time: '2022-01-01 11:31:30' },
				{ value: '[订单]订单[1541354384384843584]充值失败!', time: '2022-01-02 11:31:30' },
				{ value: '[设备]订单[1541354384384843584]充值失败!', time: '2022-01-03 11:31:30' },
				{ value: '[SIM卡]订单[1541354384384843584]充值失败!', time: '2022-01-04 11:31:30' },
			],
		});
		
		return {
			scrollAnimate,
			...toRefs(state),
		};
	},
};
</script>
<style scoped>
.container-head {
	display: flex;
	justify-content: space-between;
}
.animate-up {
	transition: all 0.5s ease-in-out;
	transform: translateY(-40px);
}
.marquee-list {
	display: flex;
	justify-content: space-between;
}
.marquee-list:hover{
	border-bottom:1px solid #54adf7;
	color:#54adf7;
	/* text-decoration:underline; */
}
.marquee-list:hover li{
	color:#54adf7;
	/* text-decoration:underline; */
}
.marquee-list li {
	/* width: 100%; */
	height: 100%;
	/* text-overflow: ellipsis; */
	overflow: hidden;
	white-space: nowrap;
	padding:10px;
	list-style: none;
	line-height: 20px;
	/* text-align: center; */
	color: black;
	font-size: 14px;
	font-weight: 400;
}
.marquee-list li:nth-of-type(1) {flex-grow: 2;}
.marquee-list li:nth-of-type(2) {flex-grow: 1;}

</style>