Divider分割线在Flex布局中不显示，怎么解决？

___海利提问于 2026-02-28 17:44:19 阅读 7

组件

我在用 Flex 布局做列表项，想在每个 item 之间加个分割线，用了 <Divider />，但根本看不到线，不知道是不是被 flex 挤没了？

试过给 Divider 加 height 和 background，还是不行。这是我的代码：

<div style="display: flex; flex-direction: column;">
  <div>Item 1</div>
  <Divider />
  <div>Item 2</div>
</div>

我来解答赞 2 收藏

反馈

1 条解答

丽红~ Lv1

这问题我之前也踩过坑，Flex 容器里的直接子元素都会变成 flex item，Divider 默认可能没撑开或者被 flex-shrink 压没了。

最直接的办法是给 Divider 加上 flex-shrink: 0，防止被压缩，同时确保有明确的尺寸：



  Item 1


  

  Item 2

不过说实话，这种写法有点啰嗦。既然都用 Flex 了，其实有个更优雅的方案——用 gap 属性配合伪元素，或者干脆让每个 item 自己带分割线，这样结构更清晰：



  Item 1


  Item 2

或者用 :not(:last-child) 统一处理，不用每次手动加 Divider：

.list-item:not(:last-child) {

  border-bottom: 1px solid #e0e0e0;

}

这样维护起来省心很多，不用每个地方都插一个 Divider 组件。

2026-02-28 18:05