JavaScript折叠组件干扰Flex布局问题求助

一、.content子元素无法横向排列的解决方法 #

逐一排查以下常见问题：

• 检查子元素是否设置了强制占满宽度的样式：比如width: 100%、flex-basis: 100%，这类样式会让每个子元素单独占一行。可改为flex: 1让子元素均分容器宽度，或根据需求设置固定宽度。
• 确认.content的flex-direction属性为row：虽然flex默认是横向排列，但可能被其他CSS规则覆盖，显式设置display: flex; flex-direction: row;。
• 移除子元素的float属性：float会破坏flex布局的排列逻辑，若子元素有float: left/right，直接删除该样式。
• 检查.content的宽度是否足够：如果容器宽度过小，子元素会自动换行。可设置flex-wrap: nowrap强制不换行，或给.content设置足够的宽度（比如width: 100%、min-width: 800px）。

二、.content-2居中布局的实现方法 #

根据需求选择对应方案：

水平居中 #

• 块级元素方案：给.content-2设置具体宽度（不能是100%），然后添加margin: 0 auto;。
• flex父容器方案：给.content-2的父元素设置display: flex; justify-content: center;，利用flex的水平居中特性。

垂直居中 #

• flex父容器方案：给.content-2的父元素设置display: flex; align-items: center;，如果需要基于视口垂直居中，再给父元素加min-height: 100vh;。
• 定位方案：给.content-2的父元素设置position: relative;，然后给.content-2设置position: absolute; top: 50%; transform: translateY(-50%);。

三、.hori-box-skill受JS折叠效果影响的问题 #

移除JS折叠后元素正常显示，说明折叠逻辑中修改了该元素的可见性样式，检查JS代码：

• 查看是否给.hori-box-skill添加了隐藏类（比如classList.add('hidden')），而展开时未正确移除，需确保折叠切换时同步添加/移除该类。
• 检查是否直接修改了元素的style属性，比如element.style.display = 'none'，展开时要恢复为display: block或对应的值（比如原本是flex就设为flex）。
• 排查是否设置了opacity: 0、height: 0、overflow: hidden等隐藏样式，展开时需将这些样式重置为初始状态。

内容的提问来源于stack exchange，提问作者Shyryu