当小程序的flex布局遇到button时，justify-content不起作用的原

当小程序的flex布局遇到button时，justify-content不起作用的原因及解决方案?
在做小程序的时候，要实现下面的搜索历史界面

下面的搜索很明显的想到是用flex布局，然后把justify-content设置为justify-content: flex-start;?
代码如下：

<view class="flex">
2</button>
4</button>
6</button>
</view>

.flex{
  display: flex;
  justifycontentstart;
flex item{
  backgroundcolor red;
}

可效果却不尽人意，发现justify-content不起作用，无论怎么设置都是space-around的效果。?
经过排查，发现原因是小程序button中的默认样式中的margin-left: auto;margin-right: auto;所引起的。

flex 格式化上下文中，在通过 justify-content 和 align-self 进行对齐之前，任何正处于空闲的空间都会分配到该方向的自动 margin 中去。参考自探秘 flex 上下文中神奇的自动 margin

原因找到了，具体修改就容易多了，我们可以覆盖button的margin-left和margin-right的默认值，或者在button外面包裹一层view。

在遇到这个问题之前，我也没想到过flex和margin之间还能这么用，涨姿势了

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!