用flexbox设置4个盒子

Question

我的4个框在100％宽度上拉伸时遇到问题。我使用flexbox使它响应。不幸的是，在小型设备上，我看到的是一列有4个框的

问题出在哪里？你能给我任何建议吗？我应该在代码中将display: flex放在哪里？

.meals {
  width: 100%;
  margin-top: 60px;
  display: flex;
}

.meals-box {
  width: 25%;
}

.burgers-overlay {
  background: url(img/Burger-Craft-139.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
}

.hot-dogs-overlay {
  background: url(img/Burger-Craft-123.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
}

.bowls-overlay {
  background: url(img/Burger-Craft-72.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
}

.salads-overlay {
  background: url(img/Burger-Craft-44.jpg);
  height: 300px;
  background-size: cover;
  background-position: center;
}

<section class="meals">
  <div class="meals-box">
    <div class="burgers-overlay">
      <h2>Burgers</h2>
      <h4>View menu</h4>
    </div>
  </div>
  <div class="meals-box">
    <div class="hot-dogs-overlay">
      <h2>Hot Dogs</h2>
      <h4>View menu</h4>
    </div>
  </div>
  <div class="meals-box">
    <div class="bowls-overlay">
      <h2>Bowls</h2>
      <h4>View menu</h4>
    </div>
  </div>
  <div class="meals-box">
    <div class="salads-overlay">
      <h2>Salads</h2>
      <h4>View menu</h4>
    </div>
  </div>
</section>

Answer 1

如果您希望元素在移动设备上从行更改为列，则需要使用媒体查询（断点）。在下面的示例中，我使用了@media only screen and (max-width: 600px)，它告诉浏览器“仅在屏幕宽度不超过600像素时才使用此规则”。 flex-direction: column更改列的方向，align-items: center将所有项目居中到flexbox的垂直线（.meals）。

.meals
{
    width: 100%;
    margin-top: 60px;
    display: flex;
}

@media only screen and (max-width: 600px) {
  .meals {
    flex-direction: column;
    align-items: center;
  }
}

.meals-box
{
    width: 25%;
}

.burgers-overlay
{
    background: url(img/Burger-Craft-139.jpg);
    height: 300px;
    background-size: cover;
    background-position: center;
}

.hot-dogs-overlay
{
    background: url(img/Burger-Craft-123.jpg);
    height: 300px;
    background-size: cover;
    background-position: center;
}

.bowls-overlay
{
    background: url(img/Burger-Craft-72.jpg);
    height: 300px;
    background-size: cover;
    background-position: center;
}

.salads-overlay
{
    background: url(img/Burger-Craft-44.jpg);
    height: 300px;
    background-size: cover;
    background-position: center;
}

<section class="meals">
    <div class="meals-box">
        <div class="burgers-overlay">
            <h2>Burgers</h2>
            <h4>View menu</h4>
        </div>
    </div>
    <div class="meals-box">
        <div class="hot-dogs-overlay">
            <h2>Hot Dogs</h2>
            <h4>View menu</h4>
        </div>
    </div>
    <div class="meals-box">
        <div class="bowls-overlay">
            <h2>Bowls</h2>
            <h4>View menu</h4>
        </div>
    </div>
    <div class="meals-box">
        <div class="salads-overlay">
            <h2>Salads</h2>
            <h4>View menu</h4>
        </div>
    </div>
</section>