如何解决Flex容器方向:列,包裹小于子代的宽度
我有一个带孩子的简单容器。
<div class="container">
<p> long multiline content </p>
<p> long multiline content </p>
<p> long multiline content </p>
</div>
孩子们是内联的,就是他们内容的宽度。
容器将孩子放在列中,在达到固定高度后将孩子包裹成列
.container {
background: pink;
height: 200px;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap
}
.container p {
display: inline;
}
我希望容器会“包含”所有孩子。即:其宽度(和粉红色的背景)将扩展为包含所有放置子项的列。但这并没有发生,容器的宽度只是第一列的宽度。我该怎么办?
Image of result - where the pink background isn't extending to child width
此处的Codepen: https://codepen.io/bhaviksingh/pen/qBZyegO
解决方法
您应将弹性方向设置为列,以达到所需的效果。
.container {
background: pink;
display: inline-flex;
height: 200px;
flex-direction: row;
flex-wrap: wrap
}
.container p {
display: inline;
}
<div class="container">
<p>
Paragraph 1 <br/>
One two three <br/>
Four five six <br/>
Seven eight nine <br/>
</p>
<p>
Paragraph 2 <br/>
One two three <br/>
Four five six <br/>
Seven eight nine <br/>
</p>
<p>
Paragraph 3 <br/>
One two three <br/>
Four five six <br/>
Seven eight nine <br/>
Ten eleven twelve
</p>
<p>
Paragraph 4 <br/>
One two three <br/>
Four five six <br/>
Seven eight nine <br/>
</p>
<p>
Paragraph 5 <br/>
One two three <br/>
Four five six <br/>
Seven eight nine <br/>
Ten eleven twelve <br/>
Thirteen fourteen fifteen <br/>
</p>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。