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

Question

我在移动视图中遇到此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; }
}

Answer 1

您可以使用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