logo标签列表

在 flex 容器中，段落换行失败

htmlcssflexboxparagraph
6

我创建了一个flex-box容器，其中有一个div内部包含更多的图片和段落。当我在css中使用“flex-wrap:wrap;”启用换行时，段落中的文本不再换行，导致方框断行并出现在下一个方框中。以下是相关的css代码和body。

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

感谢@Matt提出的修改建议。你也有答案吗？ - Manish K Yadav
2
我有点困惑你想要实现什么。目前，它按预期换行。如果您不希望发生这种情况，可以设置 flex-wrap: nowrap。也许您可以澄清一下问题是什么？ - Matt
1
默认情况下，段落宽度为100％...因此，这看起来像是默认行为。 - Paulie_D
一张图片、一个标题文本、短描述文本和向前箭头（“阅读更多”超链接）构成一个集合（类似于一个盒子）。我需要在一行中放置4个这样的盒子（这就是为什么我使用了flexbox）。问题在于，
  1. 如果我不使用“flex-wrap：wrap”，当页面缩小时，盒子不会换行。
  2. 如果我使用flex wrap选项，这些盒子确实会换行，但段落文本会直接排列，从而导致一行中的一个盒子在完整页面下换行。
 - Manish K Yadav
2个回答
3

因为段落默认是100％宽度的，就像Paulie_D所说的那样，如果您在.aritemtext类中设置了max-width值（小于100％），它将解决您的问题。此外，如果您正在使用“flex-flow：row wrap”，则不需要“flex-direction：row”，因为“flex-flow”将“flex-direction”和“flex-wrap”设置合并为一个设置。

谢谢@N8Brown，它确实有助于打破段落文本的僵化，但仍然无法改变flexbox的行为。问题在于，当我输入“flex-direction: row;”时，盒子仍保持在行中不变。但是，一旦我给它添加wrap属性，一个盒子就会换行。不知道发生了什么。有没有办法可以向您展示正在发生的事情？（_很抱歉我是一个新用户，在这里需要一些时间来掌握所有工具_） - Manish K Yadav
这是我在这边看到的：没有设置 "flex-wrap"，你的类 ".aritem" 中的 div 元素将保持在一行上，并且它们中的段落将根据需要换行。当你设置了 "flex-wrap" 后，它现在允许段落在一行上延伸（全宽），从而增加了 div 的宽度。这增加的宽度将最后一个 div 推到下一行。如果你的屏幕宽度小于约 1490 像素，它将把最后/第四个 div 换到下一行。 - N8Brown
在 .aritemtext 类中设置一个最大宽度值（小于100%）会使其中的文本缩小。我还尝试将各个 div 的宽度限制为低至20％（以便它们可以在一行中容纳), 但没有帮助。现在，如果有的话，你认为解决这个问题的方法是什么？ 和 这个1490像素的限制是什么意思，我需要给它一些固定值吗？ - Manish K Yadav
1490像素只是您所有div宽度的近似总和。如果它们的完整宽度无法适应屏幕宽度，则会换行。我能给您的唯一其他解决方案是为您的.aritem类div设置固定宽度（我设置了300像素，在我的端上运行良好）。这将使它们都具有相同的大小。同样，flex触发器将取决于您屏幕/视口的宽度。如果您正在使用Chrome作为您的Web浏览器，请按F12（Windows）并使用响应式设计工具（Ctrl + Shift + M）以在不同的屏幕尺寸下查看您的项目。 - N8Brown
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接