flexbox布局, margin:auto 失效。
发布于 6 年前 作者 pkong 9288 次浏览 来自 问答

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要永远置于屏幕底部。 不知道大家都是怎么解决这个问题的?

回到顶部