Блог

Главная - Вопросы по программированию - Центрировать дочерние подразделения на определенной ширине экрана

Центрировать дочерние подразделения на определенной ширине экрана

#html #css

#HTML #css

Вопрос:

Я пытаюсь сделать свое приложение отзывчивым. Исходный css выглядит следующим образом :

 .footer-container {
  width: 100%;
  min-height: 260px;
  height: auto;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  position: absolute;
}

Результат таков :

введите описание изображения здесь

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

Я попытался сделать отображение: гибкое отображение: блок :

 @media only screen and (max-width: 1020px) {
  .footer-container {
    width: 100%;
    min-height: 260px;
    height: auto;
    background: black;
    color: white;
    display: block;
    text-align: center;
    justify-content: center;
    position: absolute;
  }
}

Но это получается как :

введите описание изображения здесь

Я тоже пытался flex-direction: row , но это тоже не сработало, это практически ничего не изменило.

Комментарии:

1. Если вы хотите, чтобы элементы находились друг под другом, тогда вам нужно написать display: flex и flex-direction: column для @media

Ответ №1:

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

 .footer-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.contact,
.subscribe,
.follow {
  width: 100%;
  display: flex;
  justify-content: center;
}

@media (min-width: 1024px) {
  .footer-container {
    flex-wrap: no-wrap;
    justify-content: center;
  }
  .contact,
  .subscribe,
  .follow {
    width: auto;
  }
} 
 <div class="footer-container">
  <div class="contact">Contact us</div>
  <div class="subscribe">Subscribe</div>
  <div class="follow">Follow us</div>
</div>