Есть 2 <ul> (списка) по 5 <li> (элементов) в ряд, как их же адаптировать под мобильные устройства в 2 столбца

Рейтинг: 1Ответов: 1Опубликовано: 06.05.2023

Есть контейнер, в нём 2 списка с разными классами, но с одинаковыми стилями. Они расположены горизонтально (по 5 штук) на компьютере.

.nextSection {
  width: 90%;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.container__grid {
  align-items: center;
}


/* ТУТ код идентичен предыдущему */

.container__grid_doctor {
  display: inline-block;
}

.container__medical {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.container__medical__specialists {
  align-items: center;
}

.container__medical__specialists_doctor {
  display: inline-block;
}


/* Код из адаптации под мобильные устройства ( @media ) */
@media (max-width: 600px) {
  .nextSection {
    display: flex;
    flex-wrap: wrap;
    height: 210vh;
  }
  .conteiner {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .container__grid {
    width: 100%;
    height: 100%;
  }
  .conteiner__medical {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .container__medical__specialists {
    width: 100%;
    height: 100%;
  }
}
<section class="nextSection">

  <ul class="container">
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Зоолог</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor"> Химик</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Медфизик</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Биолог</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Физик</a>
    </li>
  </ul>

  <ul class="container__medical">
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Специалист</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Судмедэксперт</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Методист</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Медпсихолог</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Специалист</a>
    </li>
  </ul>

</section>

Как выровнять вертикально в 2 колонки под мобильные устройства?

css html5 media-queries media
Источник: Stack Overflow на русском

Ответы

▲ 2Принят

Намудрили Вы с переносами во флексах. К тому же невнимательно прописали имена классов: где-то "contAiner", а где-то "contEiner".

В общем, если я правильно понял задачу, то код следующий:

.nextSection {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  width: 90%;
}

.container {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.container__grid {
  align-items: center;
}

.container__grid_doctor {
  display: inline-block;
}
.container__medical {
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.container__medical__specialists {
  align-items: center;
}
.container__medical__specialists_doctor {
  display: inline-block;
}
@media (max-width: 800px) { /* 600px - изменил, чтобы был заметен эффект в примере */
  .nextSection {
    flex-direction: row;
  }
  
  .container {
    flex-direction: column;
  }
  .container__grid {
    width: 100%;
    height: 100%;
  }

  .container__medical {
    flex-direction: column;
  }
  .container__medical__specialists {
    width: 100%;
    height: 100%;
  }
}
<section class="nextSection">

  <ul class="container">
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Зоолог</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor"> Химик</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Медфизик</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Биолог</a>
    </li>
    <li class="container__grid">
      <a href="#" class="container__grid_doctor">Физик</a>
    </li>
  </ul>

  <ul class="container__medical">
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Специалист</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Судмедэксперт</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Методист</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Медпсихолог</a>
    </li>
    <li class="container__medical__specialists">
      <a href="#" class="container__medical__specialists_doctor">Специалист</a>
    </li>
  </ul>

</section>