用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 新手教程 小技巧系列 查看内容

当小程序的flex布局遇到button时,justify-content不起作用的原因及解决方案 ...

Rolan 2019-12-5 00:31

当小程序的flex布局遇到button时,justify-content不起作用的原因及解决方案在做小程序的时候,要实现下面的搜索历史界面下面的搜索很明显的想到是用flex布局,然后把justify-content设置为justify-content: flex-st ...

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

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

  1. <view class="flex">
  2. <button class="item">1</button>
  3. <button class="item">2</button>
  4. <button class="item">3</button>
  5. <button class="item">4</button>
  6. <button class="item">5</button>
  7. <button class="item">6</button>
  8. <button class="item">7</button>
  9. </view>
  1. .flex{
  2. display: flex;
  3. flex-wrap: wrap;
  4. justify-content: flex-start;
  5. }
  6. .flex .item{
  7. width: 216rpx;
  8. background-color: red;
  9. margin-bottom: 34rpx;
  10. }

可效果却不尽人意,发现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之间还能这么用,涨姿势了

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: lkkwxy 来自: 简书