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

Flex布局问题：组件化Sider导致的页面混乱

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

原创最新推荐文章于 2024-02-06 16:23:34 发布 · 430 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

当我将侧边栏组件化后，出现如下问题：
在这里插入图片描述
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>