前言

日常做项目的时候一定经常遇到这种展示数据的模态框，每一行字数不一样长的时候右边的数据总是左对齐的，想要好看的效果就需要改变一下布局啦~

先看一下改完后的效果

是不是明显好看了很多

一、改变布局

 <Modal
   title={<div style={{marginBottom:30}}>组件使用数据</div>}
   open={isModalOpen2}
   onCancel={handleCancel2}
   footer={null}
 >
    <div className={styles['data-desc']}>
       <span> 覆盖应用数：</span>
       <span>{useDate?.useAppCount}个</span>
    </div>

     <div className={styles['data-desc']}>
        <span>调用次数：</span>
        <span>{useDate?.useCount}次</span>
     </div>
 </Modal>

我们选用盒子模型，每一行是一个div 里面包含两个span标签；

二、合理的css

我们先构思一下两个span标签，让他flex一下，最关键的就是怎么布局； 复习一下flex布局的justify-content有哪几种属性 start end flex-start flex-end center left right space-between space-around

因为我们是左对齐，显得不整齐，或许可以试一下让第二个元素靠右对吧，那就用到了space-between这个属性可以让两个span元素靠两边；

会成为这样：

是因为这个div盒子没有宽度，给他设置一个合理的宽度就能完美解决了

另外还复习了一下nth的用法

.data-desc {
  width: 120px;
  height: 40px;
  display: flex;
  justify-content: space-between;
}

.data-desc span:nth-child(1) {
  font-size: 14px;
  font-family: PingFang SC, PingFang SC-Regular;
  font-weight: 400;
  text-align: left;
  color: #08101e;
  line-height: 22px;
}

.data-desc span:nth-child(2) {
  color: #2D7AF7;
  font-weight: 600;
}

欢迎各位大佬提供更好的思路呀~