Question

我创建了一个伸缩框容器，其中包含更多图像和一个div内的段落。一旦启用“ flex-wrap：wrap;”将CSS换行，段落中的文本就不再换行，导致框折行并出现在下一个中。附加相关的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

由于默认情况下段落的宽度为100％（如Paulie_D所述），如果您在.aritemtext类中设置最大宽度值（小于100％的任何值），它将解决您的问题。另外，如果您使用的是“ flex-flow：行换行”，则不需要“ flex-direction：行”，因为“ flex-flow”将“ flex-direction”和“ flex-wrap”设置合并为一。

Answer 2

您也可以将段落用于display: inline或设置子项的宽度。

使用参数化的mixins： https://github.com/mabbashm110/Sprint-Challenge--Responsive-Less/blob/master/less/home-page.less

段包装在flex容器中失败

2 个答案: