本文介绍了使柔性物品占新线的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.

revised jsfiddle

Spec reference:

这篇关于使柔性物品占新线的100%宽度的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

10-22 01:36