html - flex-box，保持第一行展开

Question

我有一个容器，我需要内部块相互跟随并且表现得像浮动的。我不能使用浮动，因为布局应该在分辨率更改后重新排列。目前，我需要块 1（70% 宽度）和 2（30%）位于同一行，但第二个将自身移动到下一行：

HTML：

<section>
  <div>Header</div>
  <div>SideRight</div>
  <div>Bottom line</div>
</section>

CSS

body * {
  box-sizing: border-box;
}
section {
  background: #ddd;
  display: flex;
  flex-direction: column;
  max-width:300px;
}
section > div{
  padding: 10px;
}

section > div:nth-child(1){
  background-color: pink;
  width: 70%;
}

section > div:nth-child(2){
  background-color: lightgreen;
  align-self: flex-end;
  width: 30%;
}

section > div:nth-child(3){
  background-color: yellow;
}

您可以在此处查看实时示例：https ://plnkr.co/edit/f6LWiQfpRUwYYyW9Dve4?p=preview

那么，有没有可能实现呢？最后，它应该如下所示：

标签： htmlcssflexbox

Answer 1

您可以添加flex-wrap: wrap;和section删除flex-direction: column;这样的

section {
  background: #ddd;
  display: flex;
  /* flex-direction: column; */
  max-width: 300px;
  flex-wrap: wrap;    //add this
}

如果你想要“底线”填满整行添加flex-grow: 1;到section > div:nth-child(3)

最终结果将是这样的

section {
  background: #ddd;
  display: flex;
  /* flex-direction: column; */    
  max-width: 300px;
  flex-wrap: wrap;           //new
}

section > div:nth-child(3) {
  background-color: yellow;
  flex-grow: 1;              //new
}

这是一个工作示例