iview侧边栏组件化后布局混乱

最新推荐文章于 2024-02-06 16:23:34 发布

eobeans

最新推荐文章于 2024-02-06 16:23:34 发布

阅读量399

点赞数

文章标签： css

本文链接：https://blog.youkuaiyun.com/kramer_light/article/details/117577040

版权

在将侧边栏Sider组件化后，遇到布局混乱的问题，内容部分被推至下方。检查发现是由于父组件的flex属性失效，导致flex布局无法正常工作。代码中使用了<div style='display:flex;'>包裹Sider和router-view，但依然出现了布局错误。解决此问题可能需要深入排查flex属性设置或Sider组件的样式冲突。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

当我将侧边栏组件化后，出现如下问题：
在这里插入图片描述
content部分被排布到下面，须知layout布局采用的是flex布局。因此在代码上如此实现：

<template>
  <div id="layout">
    <Layout>
      <MyHeader></MyHeader>
      <div style="display:flex;">
        <MySider></MySider>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </div>
      <MyFooter></MyFooter>
    </Layout>
  </div>
</template>