用 flex 堆叠 div [重复]

【问题标题】：stacking divs with flex [duplicate]用 flex 堆叠 div [重复]
【发布时间】：2017-03-17 00:45:15
【问题描述】：

我有以下代码将我的内容垂直居中

html

<div class="titleHide flex">
   <h4>...</h4>
   <h1>...</h1>
</div>

css

.titleHide {
  position: absolute;
  top: 0; left: 0;
  height: 100%; width: 100%;
  background-color: rgba(209,30,93,0.8);
}

.flex {
display: flex;
flex: 1;
align-items: center;
}

.flex 被我网站上的其他 div 使用。但是在这种情况下，它会将 h1 和 h4 标题并排排列，我希望它们堆叠在一起。

【问题讨论】：

标签： html css flexbox

【解决方案1】：

您可以考虑为此编写一个单独的 CSS 类，例如：

.flex-stack {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
}

.flex,
.flex-stack {
  display: flex;
  flex: 1;
  align-items: center;
}

.flex-stack {
  flex-direction: column;
}

.module-1,
.module-2 {
  margin: 1em;
}

<h3>Flex Inline</h3>

<div class="flex">
  <div class="module-1">
    Module #1
  </div>
  <div class="module-2">
    Module #2
  </div>
</div>

<h3>Flex Stacked</h3>

<div class="flex-stack">
  <div class="module-1">
    Module #1
  </div>
  <div class="module-2">
    Module #2
  </div>
</div>

希望对您有所帮助。干杯！

【讨论】：