本文介绍了使柔性物品占新线的100%宽度的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有如下的HTML结构:
< div class =container>
< div class =btn-1>< / div>
< div class =btn-2>< / div>
< div class =btn-3>< / div>
< div class =text>
Lorem ipsum dolor sit amet,consectetur adipisicing elit。 veritatis harum illum假设教堂,quos,ipsam molestias et sint nemo,saepe! Soluta a,准sequi,ut corrupti eius molestias。
< / div>
< / div>
- btn-1应该与左上角对齐,所有其他按钮(btn-2,btn-3 ...)应与右上方对齐。
- 所有这些按钮之后的文字应为100%宽度。
快速模型:
我想出了第一部分(按钮):
.container {
display:flex;
justify-content:flex-end;
}
.btn-1 {
/ *将第一个按钮对齐左边* /
margin-right:auto;
}
无论我做什么,文本都不会流向下一个line ...
这是我的JSFiddle
感谢您的帮助!
解决方案
您需要将 flex-wrap:wrap
添加到容器。
默认情况下,flex容器设置为 flex-wrap:nowrap
,强制项目保留在一行上。
规范参考:
I have HTML structure like:
<div class="container">
<div class="btn-1"></div>
<div class="btn-2"></div>
<div class="btn-3"></div>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. A veritatis harum illum assumenda odio ut, quos, ipsam molestias et sint nemo, saepe! Soluta a, quasi sequi, ut corrupti eius molestias.
</div>
</div>
- btn-1 should be aligned to the top left, all other buttons (btn-2, btn-3...) should be aligned to the top right.
- The text after all these buttons should be 100% width.
Quick mockup:
I figured out the first part (buttons) with:
.container {
display: flex;
justify-content: flex-end;
}
.btn-1 {
/* align first button to the left */
margin-right: auto;
}
Bu not matter what I do, the text doesn't flow to the next line...
Here's my JSFiddle https://jsfiddle.net/an0o7taq/
Thanks for any help!
解决方案
You need to add flex-wrap: wrap
to the container.
By default, flex containers are set to flex-wrap: nowrap
, forcing items to remain on a single line.
Spec reference:
这篇关于使柔性物品占新线的100%宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!