弹性项目不转到下一行（不包装）

Question

弹性项目为什么不转到下一行？

flex项只是推到一边。

.section-header {
  border-top: 1px solid #eee;
  //padding-bottom: 20px;
  background: blue;
}

.section {
  margin-top: 20px;
  background: orange;
  padding: 20px;
}

.desc-label {
  padding-top: 10px;
  flex: 1 0 100%;
  height: 100px;
  background: green;
}

.row {
  width: 50%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  //flex-direction: column;
  //align-items: flex-start;
  padding-top: 20px;
  background: lightblue;
  height: 400px;
}

.section-title {
  flex: 1 0 100%;
  height: 100px;
  background: purple;
}

<div class="section">
  <div class="row section-header">
    <div class="section-title">Engine</div>
    <div class="desc-label">Template Element: Recipe Ingredient</div>
  </div>
</div>

https://codepen.io/anon/pen/rQVbMr

Answer 1

flex容器的初始设置为flex-wrap: nowrap。这意味着弹性项目默认情况下被强制保留在一行上。

您可以通过向容器（revised demo）中添加flex-wrap: wrap来覆盖默认值。

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap