Обертывание абзаца не удается в гибком контейнере

Question

Я создал контейнер flex-box, в котором есть дополнительные изображения и абзац внутри div.Как только я включаю перенос в css с помощью «flex-wrap: wrap;», текст в абзаце больше не переносится, в результате чего блоки разбивают строку и появляются в следующем.Прикрепление соответствующего кода CSS и самого тела.

.itembox {
  display: flex;
  flex-direction: row;
  flex-flow: row wrap;
  flex-grow: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  /*flex-shrink:0;*/
  /*flex: 1 1 0;*/
  /*justify-content: space-between;*/
  /*flex-basis:100px;*/
  /*flex-wrap:wrap;*/
}

<div class="itembox">
  <div class="aritem">
    <p>
      <img src="img/digital media 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">social media management</p>
    <div class="aritemtext">
      <p class="article">
        <!--managing your presence on various social media platforms so your followers always get the latest updates.-->
        manage your presence and content on social media
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
  <div class="aritem">
    <p>
      <img src="img/prmanage.jpg" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">pr management</p>
    <div class="aritemtext">
      <p class="article">
        <!--managing your communication strategies for a wonderful customer experience, thereby creating more value for your customers-->
        manage communication strategy for your audience
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
  <div class="aritem">
    <p>
      <img src="img/creative design 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">Creative Design</p>
    <div class="aritemtext">
      <p class="article">
        <!--need presentations, banners or a fresh new look of you site designed? Great! Send us a not and we take care of the rest-->
        get presenations, banners, or a fresh new look for your website
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
  <div class="aritem">
    <p>
      <img src="img/media 200p.png" style="height:200px; width:200px;" />
    </p>
    <p class="bold caps">media services</p>
    <div class="aritemtext">
      <p class="article">
        video shoots, editing, and photography and production services
        <!--available. contact today for a consultation-->
        <br /><a href="#" class="readmore">→</a>
      </p>
    </div>
  </div>
</div>

Answer 1

Вы также можете использовать абзац для display: inline или установить ширину дочерних элементов.

Используя параметризованные миксины: https://github.com/mabbashm110/Sprint-Challenge--Responsive-Less/blob/master/less/home-page.less

Answer 2

Поскольку абзацы по умолчанию имеют ширину 100%, как сказал Paulie_D, если вы установите значение максимальной ширины (меньше 100%) в своем классе .aritemtext, это решит вашу проблему.Кроме того, если вы используете «flex-flow: row wrap», то вам не нужно «flex-direction: row», так как «flex-flow» объединяет настройки «flex-direction» и «flex-wrap» водин.