使 flex 项目占据新行的 100% 宽度 [英] Make flex item take 100% width of new line

问题描述

我的 HTML 结构如下:

<div class="btn-1"></div><div class="btn-2"></div><div class="btn-3"></div><div class="text">Lorem ipsum dolor 坐 amet，consectetur adipisicing 精英.一个 veritatis harum illum 假设 odio ut, quos, ipsam moestias et sint nemo, saepe!Soluta a, quasi sequi, utcorruptioni eiusmolestias.

• btn-1 应与左上角对齐，所有其他按钮(btn-2、btn-3...)应与右上角对齐.
• 所有这些按钮后的文本应为 100% 宽度.

快速模型:

我想出了第一部分(按钮):

.container {显示:弹性；justify-content: flex-end;}.btn-1 {/* 将第一个按钮左对齐 */右边距:自动；}

但是不管我做什么，文本都不会流到下一行...

这是我的 JSFiddle https://jsfiddle.net/an0o7taq/

感谢您的帮助！

解决方案

需要在容器中添加flex-wrap:wrap.

默认情况下，弹性容器设置为 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

这篇关于使 flex 项目占据新行的 100% 宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！