Горизонтальный скроллинг ссылок на мобильном экране

Question

Есть блок с ссылками, по ширине он больше ширины экрана. Нужно чтобы эти ссылки прокручивались горизонтально (по проведению пальцев):

@media(max-width: 350px) {
  .links {
    display: flex;
    height: 11px;
  }
  a {
    font-size: 8px;
    line-height: 11px;
    margin-left: 20px;
  }
}

<div class="links">
  <a href="#">Главная</a>
  <a href="#">Nail-услуги</a>
  <a href="#">Hair-услуги</a>
  <a href="#">Косметология</a>
  <a href="#">Визаж</a>
  <a href="#">Эпиляция</a>
  <a href="#">Татуаж</a>
  <a href="#">Массаж</a>
  <a href="#">Ресницы</a>
</div>

Answer 1

По сути у Вас все должно работать и так, поскольку у дефолтные значения свойств flex-row и flex-wrap равны "row" и "nowrap" соотвественно. Возможно стоит проверить @media правило на соответствие размера, в примере ниже я симитировал его ограничение (в нем Flex вообще не требуется):

.links {
  overflow-x: scroll;
  width: 300px;
  white-space: nowrap;
  border: 1px solid red;
}

.links > a {
  font-size: 8px;
  margin-left: 20px;
}

.links > a:first-of-type {
  margin-left: 0;
}

<div class="links">
  <a href="#">Главная</a>
  <a href="#">Nail-услуги</a>
  <a href="#">Hair-услуги</a>
  <a href="#">Косметология</a>
  <a href="#">Визаж</a>
  <a href="#">Эпиляция</a>
  <a href="#">Татуаж</a>
  <a href="#">Массаж</a>
  <a href="#">Ресницы</a>
</div>

БЛОГ НА HUSL

Горизонтальный скроллинг ссылок на мобильном экране

Ответы (1 шт):