Flex

Всем привет. Помогите разобраться с флексами. Почему блок услуги не переноситься на следующую строку?

Так а в HTML что?


Код лучше выкладывать текстом с помощью кнопки Код.

А что куда переноситься должно? Для чего max-width: 110%?

Выложите код текстом, неудобно ж так, и не запустить самому ) :arrow_down:

чтобы как в макете встали, max-width: это ширина flex-контейнера.

<section class="section-services">
<div class="conteiner servicer-conteiner">
      <div class="heading-services">
        <h2 class="heading">Услуги</h2>
        <div class="services-sentence-block">
          <ul class="servicer-offer-information">
            <li><img src="/img/services-1.jpg" alt="" class="services-img">
              <a href=" " class="services-offer">Эксклюзивное обслуживание</a>
              <p class="services-information">Равным образом постоянный количественный рост и сфера нашей активности</p>
            </li>

            <li><img src="/img/services-2.jpg" alt="" class="services-img">
              <a href="" class="services-offer">Аренда банкетных залов</a>
              <p class="services-information">Значимость этих проблем настолько очевидна, что дальнейшее развитие
                различных форм</p>
            </li>

            <li><img src="/img/services-3.jpg" alt="" class="services-img">
              <a href=" " class="services-offer ">Сауны, быссейны, бани, фитнес-залы</a>
              <p class="services-information"> Не следует однако забывать, что начало повседневной работы по
                формированию позмиций</p>
            </li>

            <li>
              <img src="img/services-4.jpg " alt=" " class="services-img ">
              <a href=" " class="services-offer ">Охраняемые автомобильные стоянки</a>
              <p class="services-information ">Не следует, однако забывать, что начало повседневной работы по
                формированию позиций</p>
            </li>
          </ul>
        </div>
</div>
</div>

    </section>

Так а зачем 110%? :thinking:


Перед вставкой кода/нажатием кнопки надо на новую строку перейти :slight_smile: (что логично, зачем вставлять первую строку кода прямо в строку с предыдущим текстом)


flex-wrap не на том, ну и надо как-то ограничить ширину элементов.

.servicer-offer-information {
    display: flex;
    flex-wrap: wrap;
}

.servicer-offer-information li {
    width: 500px;
}

https://jsfiddle.net/AlexP11223/uf6zqodk/10/

Спасибо, всё получилось.