Flex布局按钮对齐问题求助：移动端自适应时左右按钮组高低不一致

问题根因 #

移动端左右按钮顶部不对齐问题主要由两个原因导致：

• 代码存在两处拼写错误，导致移动端对应样式没有生效：
  • 媒体查询中.wraper类名拼写错误，正确应为.wrapper
  • 媒体查询中.buttinMidDiv类名拼写错误，正确应为.buttonMidDiv
• 桌面端给左右按钮容器设置的margin: auto属性在移动端没有被覆盖，且flex容器内的子元素默认没有设置顶部对齐规则，导致右侧按钮容器位置偏移

修正方案 #

仅需要修改媒体查询内的样式即可，具体改动如下：

1. 修正上述两处类名拼写错误
2. 给移动端的左右按钮容器统一添加align-self: flex-start属性，强制两个容器顶部对齐
3. 覆盖桌面端的margin: auto属性，给左右按钮容器设置margin: 0避免自动边距干扰
4. 给中间的公司名称容器添加适当的上下边距，优化显示效果

修正后的完整CSS代码如下：

.wrapper {
  width: 100%;
  height: 700px;
  background-image: url("http://websiteillusions.com/pow/images/forest.jpg");
  background-size: 100%;
}

.buttonDiv {
  display: flex;
  flex-flow: row;
  width: 100%;
  margin: auto;
  padding-top: 10%;
  padding-left: 5%;
}

.buttonLeftDiv {
  order: 1;
  width: 20%;
  margin: auto;
}

.buttonMidDiv {
  order: 2;
  width: 60%;
  margin: auto;
}

.buttonRightDiv {
  order: 3;
  width: 20%;
  margin: auto;
}

.button {
  width: 50%;
  height: 55px;
  border-radius: 25px;
  color: white;
  padding: 5px;
  margin: 15px;
  background-image: linear-gradient(-140deg, #16a30c, #1e442d);
}

@media only screen and (max-width: 600px) {
  /* 修正拼写错误：wraper改为wrapper */
  .wrapper {
    width: 100%;
    height: 1200px;
  }
  .buttonDiv {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 1200px;
    padding-top: 0%;
    padding-left: 0%;
    background-image: url("http://websiteillusions.com/pow/images/forest.jpg");
  }
  .button {
    width: 90%;
    height: 55px;
    border-radius: 25px;
    color: white;
    padding: 5px;
    margin: 15px;
    background-image: linear-gradient(-140deg, #16a30c, #1e442d);
  }
  .buttonLeftDiv {
    order: 2;
    width: 45%;
    flex: 45%;
    /* 覆盖原有margin:auto，设置顶部对齐 */
    margin: 0;
    align-self: flex-start;
  }
  .buttonRightDiv {
    order: 3;
    width: 45%;
    flex: 45%;
    /* 和左侧容器统一设置margin和顶部对齐 */
    margin: 0;
    align-self: flex-start;
  }
  /* 修正拼写错误：buttinMidDiv改为buttonMidDiv */
  .buttonMidDiv {
    order: 1;
    width: 100%;
    /* 添加适当上下边距优化显示 */
    margin: 20px 0;
  }
}

修改后即可实现移动端左右两组按钮顶部完全对齐，原有响应式逻辑保持不变。

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