Установка 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>