收藏
回答

flexbox布局, margin:auto 失效。

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 客户端 7.0.3 2.6.0

margin:auto 主要用于修改在flex布局的主轴上元素的排列,见下文:

https://css-tricks.com/the-peculiar-magic-of-flexbox-and-auto-margins/


我需要下图中的“立即创建”按钮能够自适应的永远在手机的底部。



理论上,button的container style满足:

```

display: flex;

flex-direction: column;

```


button再设置

```

margin-top: auto

```

应该就可以,但是在小程序上不行。


我具体的设置是:

button的parent是一个form


```

.submit-form {

// 这里是为了能让form占满整个屏幕

    flex-grow: 1;

    display: flex;

    flex-direction: column;

}


.create-button {

      background-color: #5C6AA3;

      color: white;

      width: 686px;

      font-size: 32px;

      font-weight: medium;

      height: 104px;

      display: flex;

      justify-content: center;

      align-items: center;

      margin-top: auto;

    }

```

form要占据屏幕剩余的位置,同时form的最后一个child button要永远置于屏幕底部。 不知道大家都是怎么解决这个问题的?


最后一次编辑于  02-06  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答