使弹性项目占据新线宽度的100%

Question

我有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. 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应与左上角对齐,所有其他按钮(btn-2,btn-3 ...)应与右上角对齐.
• 所有这些按钮后的文本应为100%宽度.

快速模型:

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

.container {
  display: flex;
  justify-content: flex-end;
}
.btn-1 {
  /* align first button to the left */
  margin-right: auto;
}

不管我做什么,文字都没有流到下一行......

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

谢谢你的帮助!

Answer 1

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

默认情况下,Flex容器设置为flex-wrap: nowrap,强制项目保留在一行中.

修改过的jsfiddle

规格参考:

• 5.2.Flex Line Wrapping:flex-wrap属性