如何使用 Flex 属性在 CSS 中保持列表样式？

文章小白一枚，正在不断学习积累知识，现将学习到的知识记录一下，也是将我的所得分享给大家！而今天这篇文章《如何使用 Flex 属性在 CSS 中保持列表样式？ 》带大家来了解一下##content_title##，希望对大家的知识积累有所帮助，从而弥补自己的不足，助力实战开发！

Flex 属性对 "list-style" 的影响

在 CSS 中，使用 display: flex 属性会创建一个灵活的盒状布局，允许元素在水平或垂直方向上对齐和分布。然而，当对 li 元素应用 display: flex 时，它可能会覆盖默认的列表样式（例如圆点或数字）。

解决办法：

要同时显示 display: flex 和列表样式，可以使用以下方法：

1. 在 li 元素上使用 flex-direction: column：
   这将使 li 元素在垂直方向上排列，同时保留列表样式。
2. 使用 list-style-position: inside：
   这会将列表样式符号放置在 li 元素的内部，而不是外部。这与 display: flex 相兼容。

li {
  display: flex;
  flex-direction: column;
  list-style-position: inside;
}

通过应用这些解决方案，li 元素可以在采用 display: flex 布局的同时显示列表样式符号。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用 Flex 属性在 CSS 中保持列表样式？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。