Layout布局组件在移动端显示错乱怎么办？

公孙彦会提问于 2026-03-30 07:04:11 阅读 4

组件

我用了一个常见的Layout布局组件，左右两栏固定宽度，中间自适应，在PC上没问题，但一到手机上就挤在一起或者重叠了，根本没法看。

我已经加了viewport标签，也试过给容器加overflow: hidden，还是不行。是不是我的flex写法有问题？下面是关键代码：

.layout {
  display: flex;
}
.sidebar-left, .sidebar-right {
  width: 200px;
  flex-shrink: 0;
}
.main-content {
  flex: 1;
}

我来解答赞 4 收藏

反馈

1 条解答

迷人的圣贤 Lv1

加个 flex-wrap: wrap; 就行。手机屏幕小，固定宽度200px太宽了，建议用百分比重写宽度。就这样

.sidebar-left, .sidebar-right {

  width: 20%;

  min-width: 100px;

}

.layout {

  flex-wrap: wrap;

}

2026-03-30 07:05