Taro 中 flex 布局在小程序里为啥不生效？

微信小程序对一些 CSS 属性的支持确实有点坑，特别是 flex 布局。你在 Taro 里写的代码，H5 上没问题，但小程序上可能因为某些兼容性问题导致不生效。

首先，确保你的样式作用到了正确的组件上，有时候 Taro 的编译机制可能导致样式丢失。其次，小程序里可能需要额外的属性来支持 flex，比如 flex-direction 默认是 row，但有时候得显式声明一下。

你可以试试这个修改后的代码：

.container {

  display: flex;

  flex-direction: row; /* 显式声明方向 */

  justify-content: space-between;

  align-items: center;

  width: 100%;

}

.item {

  width: 100rpx;

  height: 100rpx;

  background: #ccc;

}

直接用这段代码替换原来的试试，有时候加上 flex-direction 就能解决小程序里的问题。如果还不行，检查一下 Taro 的文档，看看有没有其他注意事项。

小程序 flex 本身是支持的，常见问题是子元素被压缩了。给.item 加上 flex-shrink: 0 就行了：

.item {

  width: 100rpx;

  height: 100rpx;

  background: #ccc;

  flex-shrink: 0;

}