1

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

@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>

1
  • А в чем собственно вопрос ? что именно у Вас не выходит ?
    – noname2019
    Commented 26 сент. 2020 в 8:53

1 ответ 1

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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.