用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

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

Rolan 2019-11-12 11:23

在做小程序的时候,要实现下面的搜索历史界面下面的搜索很明显的想到是用flex布局,然后把justify-content设置为justify-content: flex-start;代码如下:!--wxml--view class="flex"button class="item"1/buttonbutt ...

在做小程序的时候,要实现下面的搜索历史界面

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

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

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

鲜花
鲜花 (1)
鸡蛋
鸡蛋

刚表态过的朋友 (1 人)

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