Как выровнять квадратные прямоугольники по прямой линии в представлении мобильного телефона / планшета в формате html / css?

Question

У меня есть скриншот, как показано ниже , который я скопировал в скрипку .На данный момент это выглядит очень хорошо в представлении рабочего стола.

Фрагменты CSS-кодов, которые я использовал для выравнивания квадратных полей на рабочем столе, выглядят следующим образом:

.squares .square {
    width: 13%;
    text-align: center;
    height: 150px;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145, 147, 150);
    border-radius: 10px;


}

Когда я вижускрипка в мобильном представлении выглядит крайне неорганизованно.

Постановка задачи:

Мне интересно, какие изменения я должен внести в скрипку, чтобы в мобильном представлении 3 квадрата приходилось в один ряд , а остальные 2 квадрата приходились посередине внизуэто (или 2 в одном и 2 в другом ряду также будет работать ).

Я пытался использовать медиазапросы, как показано ниже, но по некоторым причинам я не могу воспроизвести то, что хочу.

@media only screen and (max-width: 767px) {
.squares .square {
    width: 41%;
    text-align: center;
    height: 150px;
    margin-bottom: 11%;
    padding-top: 1%;
    padding-left: 1%;
    padding-right: 1%;
    border-style: solid;
    border-width: 3px;
    border-color: rgb(145,147,150);
    border-radius: 10px;
}
}

Answer 1

Для этого предназначен flexbox.Я сделал небольшую модель для вас, чтобы воссоздать ее для ваших целей.Возможно, потребуются некоторые медиа-запросы для небольших дисплеев, но это на ваш вкус, чтобы сделать это хорошо.Используйте это руководство для получения дополнительной информации - CSS-хитрости Руководство по Flexbox .

.container {
  background: #1D1F20;
  padding: 1em 2em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  
}

.card {
  width: 120px;
  height: auto;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1em;
  margin: 1em 0;
  text-align: center;
  border-radius: 10px;
}

.image img {
  width: 100%;
  object-fit: contain;
}

.text {
  padding: 0 1em;
}

.text p {
  -webkit-margin-after: 0; /* resetting predefined margin */
}

.arrows {
  padding: 0.5em;
}

<div class="container">
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
  <div class="arrows">
    <div><img src="http://via.placeholder.com/100x100" alt=""></div>
  </div>
  <div class="card">
    <div class="image">
      <img src="http://via.placeholder.com/150x150" alt="">
    </div>
    <div class="text">
      <p>Nibh Risus Pellentesque</p>
    </div>
  </div>
</div>