Flexbox中的gap属性干扰按钮内边距，导致注册按钮布局异常

你给两个按钮设置了flex: 1 0 50%，其中第三个参数50%是按钮的初始宽度，第二个参数0表示按钮不能收缩。当容器添加gap:24px后，两个按钮的总宽度（50% + 50%）加上gap会超出容器的最大宽度，导致注册按钮因空间不足出现布局错乱。

以下几种方法都能解决这个问题：

方法1：用calc调整初始宽度 #

把按钮的初始宽度改成calc(50% - 12px)，让每个按钮预留出一半的gap空间，总宽度刚好填满容器：

.header-buttons {
  max-width: 24.9rem;
  display: flex;
  flex-grow: 1;
  gap: 24px;
}

.btn-login {
  padding: 12px;
  border: 2px solid #ffc305;
  color: #ffc305;
  background-color: transparent;
  flex: 1 0 calc(50% - 12px);
}

.btn-signup {
  flex: 1 0 calc(50% - 12px);
  color: #010101;
  background-color: #ffc305;
  border-bottom: 4px solid #c79800;
  border-right: 4px solid #c79800;
}

方法2：允许按钮收缩 #

把flex-shrink设为1（即flex:1 1 50%），让按钮可以自动收缩来适配gap的空间：

.btn-login {
  padding: 12px;
  border: 2px solid #ffc305;
  color: #ffc305;
  background-color: transparent;
  flex: 1 1 50%;
}

.btn-signup {
  flex: 1 1 50%;
  color: #010101;
  background-color: #ffc305;
  border-bottom: 4px solid #c79800;
  border-right: 4px solid #c79800;
}

方法3：去掉固定宽度，让按钮平分空间 #

直接用flex:1代替flex:1 0 50%，这样两个按钮会自动平分容器的可用空间，同时gap正常生效：

.btn-login {
  padding: 12px;
  border: 2px solid #ffc305;
  color: #ffc305;
  background-color: transparent;
  flex: 1;
}

.btn-signup {
  flex: 1;
  color: #010101;
  background-color: #ffc305;
  border-bottom: 4px solid #c79800;
  border-right: 4px solid #c79800;
}

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