如何让两个div并排-用flex快速实现页面布局对齐

折腾网页样式的时候，一直搞不懂如何让两个div并排，改了半天样式要么上下错开，要么间距乱跳，总觉得别人写的页面整整齐齐，自己一上手就乱七八糟。一开始傻乎乎给div加宽度，又不停调margin数值，以为缩小盒子宽度就能自然挨在一起，结果不管怎么改，两个区块依旧乖乖竖着排列，完全达不到想要的横向效果。

还试过用float浮动属性去调整，网上随便抄来的代码粘贴上去，看着好像暂时并排了，可后续下面的内容全部跟着错乱排版，父盒子高度直接塌陷，页面整体歪歪扭扭。反复调试样式半天，清理浮动又格外麻烦，稍微改动一点结构，整体布局就全部崩坏，越改越烦躁，总怀疑是不是哪里代码被别人偷偷改动过。

后来才反应过来，浮动本来就不是专门用来做横向并排布局的方式，适配性差还容易遗留各种后遗症。随手换成flex弹性布局之后，短短几行代码就轻松解决了困扰很久的问题，只需要给包裹两个div的外层容器加上对应样式，内部子元素就会自动横向排列。

不用反复计算宽度差值，不用小心翼翼调整外边距，也不用额外处理页面错乱塌陷的问题。两个div会规整贴合在一起，想要调整间距、居中、两端分布，只需要改动一行属性就能完成，响应适配也格外顺畅，缩放页面不会出现错位重叠的情况。

同事之前也纠结过同样的页面问题，执着用传统表格排版实现div横向摆放，代码冗长繁琐，后期修改样式十分费劲。对比下来弹性布局简洁太多，手写一遍就能记住逻辑，日常写页面几乎不会再用到老旧的浮动方式处理并排需求。

偶尔还是会忘记给父元素添加display:flex属性，单纯修改子div样式，忙活许久依旧没有任何变化。反复踩过几次这样的疏漏，才牢牢记住横向并排的核心逻辑，样式一定要写在外层容器，而不是单独作用在两个盒子本身。

宽度分配也很容易出错，不加比例限制的话，两个div会自动挤压变形，内容超出盒子边界直接溢出页面。适当分配占比之后，不管内部文字图片怎么增减，并排结构都能保持稳定，不会随意打乱原本的页面结构。

原本以为网页排版是很复杂的逻辑，弄懂div并排原理之后才发现并没有多难。只是一开始走了太多弯路，执着老旧低效的方法，不肯轻易更换布局思路，白白消耗大量时间调试无效代码。

关掉编辑器的时候，才发觉最简单好用的方式一直都在，只是自己迟迟没有找对方向。

需要我调整段落数量、情绪语气或是修改代码相关细节吗？