html - 媒体查询调整大小时按钮自动调整

我在移动视图中遇到此5按钮的问题。在我的桌面上，5按钮都是嵌入式的。而且如果它在移动中，则最后2个按钮需要位于3的底部。我需要的结果是，即使将其调整为较小的视图，也需要对其进行修复。按钮占据了所有空间。请参阅所附图片。谢谢。



HMTL

<div class="cont6">
    <button type="button" onclick="location.href='#date_2019'">2019 AAA</button>
    <button type="button" onclick="location.href='#date_2018'">2018 AAA</button>
    <button type="button" onclick="location.href='#date_2017'">2017 AAA</button>
    <button type="button" onclick="location.href='#date_2016'">2016 AAA</button>
    <button type="button" onclick="location.href='#date_2015'">2015 AAA</button>
</div>

的CSS

.cont6 { margin:0 2%; display:flex; justify-content:space-between; width:96%; }
.cont6 button {
    background-color:#EEE;
    border:1px solid #E5E5E5;
    color:#BF0000;
    font-weight:bold;
    font-size:17px;
    padding:1% 1% 1% 3%;
    cursor:pointer;
}
.cont6 button:after { content:'\2BC6'; margin-left:40px; }

@media only screen and (max-width:640px){
    .cont6 { width:auto; display:block; }
    .cont6 button { margin-bottom:15px; margin-right:2%; font-size:16px; }
}

最佳答案

您可以使用flexbox。只需清理您当前的代码，然后尝试一下即可。

body {
  margin: 0;
  background: #333;
}

header {
  padding: .5vw;
  font-size: 0;
  display: -ms-flexbox;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
}

header div {
  flex: auto;
  width: 200px;
  margin: .5vw;
}

header div img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 400px) {

  header div {
    margin: 1px;
  }

  header {
    padding: 0;
  }

}

button {
  width: 100%;
  border: 0;
  background: purple;
  color: #fff;
  border-radius: 5px;
  height: 60px;
}

<header>
  <div><button>Button1</button></div>
  <div><button>Button1</button></div>
  <div><button>Button1</button></div>
  <div><button>Button1</button></div>
</header>

或看到此link