这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战
需求分析
今天突然来了一个关于样式修改的需求，想着正好缺一题作为flex布局的收尾，首先我先介绍下需求
需求：布局调整，做的好看点
对，需求就是这么简单，数据都已经处理好了，至于怎么处理的（...）我就不说了，最后能拿到正确的数据就ok了，先看下修改前后的样式对比，en 确实挺难看的了 有点老的样子，连展开折叠都是很僵硬的v-show控制，没有一点美感
再来看看更改后的，采用比较简介的方式展示数据，发现做了一年半前端后，自己的审美也有了些许的改变（我真棒）~~哈哈哈，话说原生的audio确实很棒呢！！功能很齐全了，标签需要加controls属性才能出来音频控制台噢
理解需求
以我的理解来说，拿到这样的需求，有几个注意点：
-
最好是使用原来的dom结构
-
重新创建一个样式文件，在原来样式文件后在引入新的样式文件，这样的话大部分样式都能覆盖先前的，实在不能覆盖的又不想多加嵌套class或者id，那就直接添加
!important吧，哈哈哈<style lang="css" scoped> @import "./oldStyle.scss" // 这是原来的 @import "./newStyle.scss" // 这是我新增的，大部分样式都是用作覆盖上面得老样式 </style>
开工
首先分析下整体，发现其实每一块得内容结构都一样，就像这样，用户下面有四个字段，每个字段下面有key和value，由此可以联想出整体用两个flex布局就可以达到这样得效果，所以看似内容挺多的，但是需要改的也不多
css代码
// 外层
.f-unit-content {
display: flex;
flex-wrap: wrap; // 因为子字段数不固定，一定要对父元素执行这个换行哈，否则子元素都会在一行
// 内层
.content-info-unit {
flex-grow: 1; // 自动扩张
flex-basis: 50%; // 百分比是以父元素宽度计算项目得伸缩基准值
display: flex; // 每一个字段容器再设置flex布局，主要是做垂直居中用的，因为有些文字和图片（音频播放器）不在同一行，用这个配合下面的属性就可以垂直居中了，很方便
align-items: center;
// 字段名
.label {
width: 100px;
}
}
}
我把一些和flex布局无关的样式删掉了，不用在意细节，关注布局即可！！
效果
本章小结
这个案例简单使用了嵌套flex，想要用的好，还是边总结边实践啊！！
最后得最后推荐一个在线画思维导图在线工具diagrams，免费、免费、免费！！！不是免费我不推荐 嘻嘻
