Question

我设法使用灵活的盒子布局模块做了很多事情，但是当谈到段落时我遇到了这个问题：

当我使用少量文本时，一切都按预期工作：
当我使用大量文本时，布局会中断：

以下是我正在使用的代码：

body {
  width: 90%;
  margin: 3em auto;
  background-color: #aaa;
}
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid black;
}
.title {
  flex: 1 0 100%;
  text-align: center;
  background-color: #eee;
}
.image {
  flex: 0 0 auto;
  background-color: #ccc;
}
.image img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.text {
  flex: 6 0 auto;
  background-color: #96AED1;
}

<section>
  <div class="title">
    <h1>Title here</h1>
  </div>

  <div class="image">
    <img src="http://www.macovei-sculptor.ro/img.jpg">
  </div>

  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis velit, ullamcorper eu ornare sed, vulputate quis diam. Duis ultrices rutrum sapien, in condimentum nibh sagittis sit amet. Morbi sit amet rhoncus dui, at pharetra nisi. Nunc et
      lacus porttitor, pretium nisl at, sollicitudin velit. Donec felis nisl, consequat vitae egestas vestibulum, egestas non tortor. Cras mattis non sem nec aliquam. Sed dignissim sit amet sapien vitae feugiat. Pellentesque vel luctus ante, quis ornare
      purus. Nulla in arcu sapien. Aenean tempor arcu ac lacinia pellentesque. Quisque vulputate maximus augue, non aliquet ligula gravida in. Donec a leo justo. Integer velit eros, blandit sit amet elit eget, efficitur mollis nulla. Suspendisse tempor
      ligula facilisis scelerisque ullamcorper. Ut vehicula ligula ipsum, cursus condimentum sapien pretium ac.</p>
  </div>
</section>

为什么在使用大量文本时<p>标记无法正确包装？

Answer 1

正确的解决方案是要么

white-space: initial;

或

min-width: 0;

查看链接here

*我知道链接是关于截断文本。但是，相同的解决方案适用于包装文本。

Answer 2

<。> .text的父级有flex-direction：row，所以.text应该收缩设置为1，否则里面的文字不会被包裹

＆＃13;

body {
  width: 90%;
  margin: 3em auto;
  background-color: #aaa;
}
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  border: 1px solid black;
}
.title {
  flex: 1 0 100%;
  text-align: center;
  background-color: #eee;
}
.image {
  flex: 0 0 auto;
  background-color: #ccc;
}
.image img {
  display: block;
  max-height: 100%;
  max-width: 100%;
}
.text {
  flex: 6 1 auto;  /* FLEX-SHRINK: 1; */
  background-color: #96AED1;
}

＆＃13;

<section>
  <div class="title">
    <h1>Title here</h1>
  </div>

  <div class="image">
    <img src="http://www.macovei-sculptor.ro/img.jpg">
  </div>

  <div class="text">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis velit, ullamcorper eu ornare sed, vulputate quis diam. Duis ultrices rutrum sapien, in condimentum nibh sagittis sit amet. Morbi sit amet rhoncus dui, at pharetra nisi. Nunc et
      lacus porttitor, pretium nisl at, sollicitudin velit. Donec felis nisl, consequat vitae egestas vestibulum, egestas non tortor. Cras mattis non sem nec aliquam. Sed dignissim sit amet sapien vitae feugiat. Pellentesque vel luctus ante, quis ornare
      purus. Nulla in arcu sapien. Aenean tempor arcu ac lacinia pellentesque. Quisque vulputate maximus augue, non aliquet ligula gravida in. Donec a leo justo. Integer velit eros, blandit sit amet elit eget, efficitur mollis nulla. Suspendisse tempor
      ligula facilisis scelerisque ullamcorper. Ut vehicula ligula ipsum, cursus condimentum sapien pretium ac.</p>
  </div>
</section>

＆＃13;

Answer 3

我有一个似乎有效的解决方案，但我不认为它是100％正确，这是一个小提琴：

https://jsfiddle.net/2xxorq4n/1/

这是CSS代码：

body {
  width: 90%; 
  margin: 3em auto;
  background-color: #aaa;
}
section {
  border:1px solid black;
}
.title {
  text-align: center;
  background-color: #eee;
}
.image { 
  background-color: #ccc;
}
.image img {
  display: block; 
  max-height: 100%; 
  max-width: 100%;
}
.text { 
  background-color: #96AED1;
}
/* FLEX STYLES */
section {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}
.title, .image, .text {
  flex: 1 100%;
}
@media all and (min-width: 600px) {
  .image { flex: 1 auto; }
}
@media all and (min-width: 800px) {
  .text { flex: 800 0px; }
  .image { order: 1; }
  .text { order: 2; }
}

具体来说，我不认为这是正确的：.text { flex: 800 0px; }。虽然它似乎有用，但我不认为它应该像那样工作，因为css技巧网站上的示例提供了有关Flexbox使用情况的更多信息，显示flex: 2 0px;：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

文本未包装在Flex容器内

3 个答案: