使柔性物品占新线的100％宽度 [英] Make flex item take 100% width of new line

问题描述

我有如下的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 https：// jsfiddle .net / an0o7taq /

感谢您的帮助！

解决方案

您需要将 flex-wrap：wrap 添加到容器。

默认情况下，flex容器设置为 flex-wrap：nowrap ，强制项目保留在一行上。

修正了jsfiddle

规范参考：

• 5.2。 Flex Line Wrapping： flex-wrap 属性

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:

• 5.2. Flex Line Wrapping: the flex-wrap property

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