使弹性项目占据新线宽度的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

您需要将AssignmentOperator添加到容器中。

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

revised jsfiddle

规格参考：

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

Answer 2

您需要更多具有不同弹性流和样式的容器。提示：学习最重要的flex道具：align-items，flex-flow，justify-content。它们都适用于容器的直接子。因此，当您需要布局时，您需要更多具有不同弹性流的容器。

本指南对我帮助很大。他们也有很好的例子：

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.container {
  display: flex;
  flex-flow: column nowrap;
}

.header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.header-left, .header-right {
  display: flex;
  flex-flow: row nowrap;
}

.btn {
  width: 40px;
  height: 40px;
  border: 1px solid #ddd;
  background-color: #eee;
}

.text {
  width: 100%;
}

<div class="container">
  <div class="header">
    <div class="header-left">
      <div class="btn">btn1</div>
    </div>
    <div class="header-right">
      <div class="btn">btn2</div>
      <div class="btn">btn3</div>
    </div>
  </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>