当页面缩放的时候，该怎么解决样式崩盘的问题呢？

问题描述：

        自己写了一个vue的项目，由于刚入行不久吧，出现了问题也是花了很久的时间才找到问题所在，或许这就是刚入行要踩的坑吧，反正是自己遇到的错误绝对是印象深刻的，以后遇到类似的问题应该也会想起来怎么应对。

        回到正题，标题就是我遇到的问题，页面缩小的时候，会发现元素是往左上角缩的，这就直接导致了样式的崩盘，原本一左一右的元素，缩小之后距离就会变得很大，而不是保持二者的相对距离。但是大多数网站在进行缩放的时候是将整个页面往中间缩小(你可以试一试csdn，也是如此)。页面放大姑且不论，一般不会碰到这个问题，放大的话，一般的效果就是保持原来的页面不变，只是多出了进度条罢了。当时也是查阅了很多资料，百度，google，查了很久都没有满意的解决办法，但是网上的解决问题无非集中于一种：

        在你崩盘的元素的最外层套一层div，然后给这个父级的div设置样式：margin:0 auto; 就是让这个div里的内容居中显示，当页面缩小的时候，就会将内容居中缩小，类似于下面的效果：

     

解决办法：

        至于解决办法，代码可能算是公司的机密，我就不具体贴出来了，我可以给各位一个大致的思路：

        1.首先，如果只是使用定位的话，当页面缩小的时候是肯定不会保持二者之间的相对距离的，缩放的话样式肯定会崩的。

        2.可以尝试给这两个元素（也可能是很多个，具体的看你自己的界面而定）的父元素设定flex布局，然后设置flex常见的几行代码：

         3.你需要显示的内容和父元素大致是这样的关系：  

<div class="这里是父div">
    <div class="这里是你需要中部居左的内容">
        <!--左半边div的内容-->
    </div>
    <div class="这里是你需要中部居右的内容">
        <!--右半边div的内容-->
    </div>
</div>

        4.最后，你的元素有可能是挤在中间的，这个时候，再去对左边和右边的div进行定位，最好是用相对定位，因为相对定位自己本身的空间还站着，不会脱离文档流，不对其他元素的布局造成影响。

        5.等你调好之后，再去缩放浏览器，你就会惊奇的发现，样式不崩了，不管是缩小还是放大，二者之间的距离都是不变的！

        希望这篇博客可以帮助到在看的你！！！