如何在html / css中的移动/平板电脑视图中以直线对齐方框？

Question

我有一个屏幕截图，如下所示，我已在fiddle中复制了该屏幕截图。此时，它在桌面视图中看起来非常好。

我在桌面视图中对齐方框时使用的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个方框在它下面的中间< / strong>（或 2合1和另一行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-Tricks Flexbox Guide。

.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>