没有出现 CSS 的 FlexBox 内的文本答案

【问题标题】：Text inside FlexBox with CSS not Appearing没有出现 CSS 的 FlexBox 内的文本
【发布时间】：2021-11-05 02:30:23
【问题描述】：

目标：我有一个带行显示的主弹性框。在每个弹性框中，我都会有卡片，里面有文字。当我在 flexbox 内创建卡片时，我将 p 标签与文本一起放在卡片内，但它没有反映。我希望在每张卡片中显示文字。

代码

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  margin: 10px;
  /*text-align: center;*/
  line-height: 70vh;
  font-size: 30px;
}

.funds-card {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.transaction-card {
  width: 700px
}

.amount-card {
  width: 70%;
  height: 70px;
  max-width: 100px;
  border-radius: 5px;
  margin: 5px auto 0 auto;
  padding: 1.5em;
  background-color: green;
  text-align: center;
}

<body>

  <h1>The flex-direction Property</h1>

  <p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>

  <div class="flex-container">
    <div class="funds-card">
      <div class="amount-card">
        <p>Hello</p>
      </div>
    </div>
    <div class="transaction-card">
      2
    </div>
  </div>

</body>

【问题讨论】：

标签： html css flexbox

【解决方案1】：

从.flex-container>div 中删除line-height: 70vh; 属性

.flex-container {
  display: flex;
  flex-direction: row;
  background-color: DodgerBlue;
}

.flex-container>div {
  background-color: #f1f1f1;
  margin: 10px;
  /*text-align: center;*/
  /*line-height: 70vh;*/
  font-size: 30px;
}

.funds-card {
  display: flex;
  flex-direction: column;
  width: 200px;
}

.transaction-card {
  width: 700px
}

.amount-card {
  width: 70%;
  height: 70px;
  max-width: 100px;
  border-radius: 5px;
  margin: 5px auto 0 auto;
  padding: 1.5em;
  background-color: green;
  text-align: center;
}

<body>

  <h1>The flex-direction Property</h1>

  <p>The "flex-direction: row;" stacks the flex items horizontally (from left to right):</p>

  <div class="flex-container">
    <div class="funds-card">
      <div class="amount-card">
        <p>Hello</p>
      </div>
    </div>
    <div class="transaction-card">
      2
    </div>
  </div>

</body>

【讨论】：