Кнопка автоматической настройки при изменении размера медиа-запроса

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>

или посмотрите эту ссылку