如何在弹性框中将项目堆叠在一起[重复]答案

【问题标题】：How to stack items on top of each other in a flex box [duplicate]如何在弹性框中将项目堆叠在一起[重复]
【发布时间】：2017-12-27 18:22:38
【问题描述】：

测试页面：http://vintageamericanpottery.com/3test.html

这应该很简单，但我无法让<div class="welcome"></div> 堆叠在<div class="header"></div> 之上。我认为这是因为它们都在一个 flex 容器中，但是必须有一种方法可以让 div 在仍然在这个容器中时相互堆叠。

我尝试添加display: block、flex-direction: column 和clear: both，但它不会阻止元素内联显示。

.container {
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  margin: 20px 0px 0px 0px;
  padding-left: 4%;
  padding-right: 4%;
  padding-top: 1%;
  max-width: 1200px;
}

.welcome {
  display: flex;
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  font-size: 1em;
  text-align: left;
  color: #5A5A5A;
  flex-direction: column!important;
  flex-wrap: no-wrap;
}

<div class="container">
  <div class="welcome" style="/* clear:both */">Welcome to Happy Heidi's </div>
  <div class="header" style="clear:both">
    <h1>Vintage Fiesta Pottery for Sale</h1>
  </div>
</div>

我不能在这个容器中放任何其他东西并简单地堆叠吗？我希望这个容器顶部的两个 div 堆叠，但无论我做什么，它们都保持内联。

【问题讨论】：

请在此处发布最少量的代码来演示问题，而不是要求我们访问未知站点并查看其源以查找问题。
发布代码有什么秘诀吗？论坛删除了我的标签。

xxx

xxx
.... 容器内的所有内容都正常工作，但是我只想将这两个 div 放在自己的顶部，在页面顶部左对齐，所以我有 container>welcome
header
容器内容...
欢迎来到 Stack Overflow！寻求代码帮助的问题必须包括在问题本身最好在Stack Snippet 中重现它所需的最短代码。见How to create a Minimal, Complete, and Verifiable example

xxx