flex 布局让ul 里面的li自适横向应布局

可以使用以下代码：

HTML：

<ul class="flex-container">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

CSS：

.flex-container {
  display: flex;
  justify-content: space-between; /* 使项目之间的间隔相等 */
  align-items: center; /* 使项目在交叉轴上居中 */
}

.flex-container li {
  flex: 1; /* 使每个项目的宽度自适应 */
  text-align: center; /* 使文本居中 */
}