CSS：如何在flex纵向容器中实现button匹配Figma设计的对齐效果

参考效果图 #

• Figma设计效果图：
  
• 当前实际页面效果：
  

现有代码 #

HTML代码

<form className={classes['form']} onSubmit={props.submitHandler}>
  <h1 className={classes['form__header']}>Join our website</h1>
  <Input
    placeholder='Username'
    value={props.username}
    changeHandler={props.usernameChangeHandler}
  />
  <Input
    placeholder='Email'
    value={props.email}
    changeHandler={props.emailChangeHandler}
  />
  <Input
    placeholder='Password'
    value={props.password}
    changeHandler={props.passwordChangeHandler}
  />
  <button
    className={classes['form__button']}
    type='submit'>
    Register
  </button>  
</form>

SCSS代码

.form {
  display: flex;
  flex-direction: column;
  min-width: 50vh;
  max-width: 500px;
  margin: 15px auto;

  &__header {
    font-size: 4rem;
    color: #fff;
  }
    
  &__input {
    margin-bottom: 36px;
    padding: 17px;
    font-size: 1.5rem;
    background-color: map-get($colors, primary);
    border: 4px solid map-get($colors, secondary);
    border-radius: 5px;
  }
        
  &__button {
    transition: all .3s ease;
    margin-left: auto;
    padding: 15px;
    width: 250px;
    font-size: 2.3rem;
    font-weight: 600;
    color: map-get($colors, grey);
    background-color: map-get($colors, yellow);
    border-radius: 40px;
    
    &:hover {
      color: #000;
      background-color: #fff;
    }
  }

  &__divider {
    margin: 20px 0;
    align-self: center;
  }
}

解决方案 #

只需要修改两处SCSS样式即可实现按钮底部居中对齐的效果：

1. 给.form容器新增最小高度和底部内边距，预留按钮放置的底部空间，数值可根据设计稿实际尺寸调整

.form {
  display: flex;
  flex-direction: column;
  min-width: 50vh;
  max-width: 500px;
  margin: 15px auto;
  /* 新增以下2行 */
  min-height: 75vh;
  padding-bottom: 35px;
  /* 其余原有样式保持不变 */
}

2. 修改按钮的margin属性，替换原来的右对齐设置

&__button {
  transition: all .3s ease;
  /* 删除原有 margin-left: auto，替换为以下margin设置 */
  margin: auto auto 0;
  /* 其余原有样式保持不变 */
}

原理解释 #

flex纵向布局中，给子元素设置margin-top: auto会自动分配容器上方的所有剩余空白空间，把元素直接推到容器的最底部；margin-left: auto; margin-right: auto会让元素水平方向居中，合并写为margin: auto auto 0就能同时实现底部+居中的效果。

提示：请确认你自定义的Input组件内部已经绑定了classes.form__input类名，否则输入框的预设样式不会生效。

内容的提问来源于stack exchange，提问作者user16657995