Vue3：容器里面有两个元素，一个子元素居中，另一个子元素靠近容器右边

前言

• 页面顶部有一个容器盒子，盒子里面有两个元素：一个子元素需要居中，另一个子元素需要靠近容器的右边
• 目标效果如下：
  

实现

使用弹性布局＋百分比来实现

1、template部分

顶部由标题和当前时间组成：

<template>
  <div class="Container">
    <header>
      <!-- 标题 -->
      <h1>数据看板</h1>

      <!-- 当前时间 -->
      <div class="showTime">{{ currentTime }}</div>
    </header>
  </div>
</template>

2、当前时间的相关代码

• 主要逻辑如下：

• 获取当前时间的函数如下：

 // 当前时间读取
 function time() {
   t = setTimeout(time, 1000); //開始运行
   clearTimeout(t); //清除定时器
   dt = new Date();
   var y = dt.getFullYear(); //年
   var mt = dt.getMonth() + 1; //月
   var day = dt.getDate(); //日
   var h = dt.getHours(); //获取时
   var m = dt.getMinutes(); //获取分
   var s = dt.getSeconds(); //获取秒
   var week = getYearWeek(y, mt, day); //获取周
   currentTime.value =
     "当前时间：" +
     y +
     "年" +
     mt +
     "月" +
     day +
     "日" +
     "-" +
     h +
     "时" +
     m +
     "分" +
     s +
     "秒" +
     "(第" +
     week +
     "周)";

   t = setTimeout(time, 1000); //设定定时器，循环运行
 }

• 函数：获取当前日期是本年度的第几周

 // 获取当前日期是本年度的第几周
 function getYearWeek(a, b, c) {
   var date1 = new Date(a, parseInt(b) - 1, c), //当前日期
     date2 = new Date(a, 0, 1), //当年第一天
     // d是当前日期是今年第多少天
     d = Math.round((date1.valueOf() - date2.valueOf()) / 86400000);
   // d + 当前年的第一天的周差距的和在除以7就是本年第几周
   return Math.ceil((d + (date2.getDay() + 1 - 1)) / 7);
 }

• 当前时间的展示格式如下：

包含年月日、时分秒、以及第几周

3、style部分

• 主要逻辑如下：

4、结果

• 效果如下：

• 浏览器缩小之后，2个子元素没有发生重叠：