如何在显示 flex 容器内制作子容器显示块答案

【问题标题】：How can I make a child container display block inside of a display flex container如何在显示 flex 容器内制作子容器显示块
【发布时间】：2020-12-28 07:32:32
【问题描述】：

我试图有 2 个容器，一个显示 flex（并排）和一个子容器来显示块。我似乎无法弄清楚如何使这项工作。这就是我想要的https://i.stack.imgur.com/cRlRw.png，这就是我的容器的样子https://i.stack.imgur.com/xLINA.png
怎样才能使索引“58”与“中等”内联，并使段落看起来像图片？

这是 JSX

<div className="second-col-container">
          <h2>Air Quality Index</h2>
          <div className="mod-container">
             <span className="index">58</span>

             <span className="mod">Moderate</span>
          </div>

          <div className="para-mod">
            Air quality is acceptable; however, for some pollutants there may be
            a moderate health concern for a very small number of people who are
            unusually sensitive to air pollution.
          </div>
      </div>

CSS

.second-col-container {
  background-color: white;

  width: 250px;
  grid-area: air-index;
  margin-top: 20px;
  border-radius: 10px;
}

.second-col-container h2 {
  margin-bottom: 20px;
  margin-left: 10px;
}

.para-mod {
  font-size: small;
  width: 50%;
  color: grey;
  margin-left: 10px;
}

.index {
  margin: 5px 0 0 5px;
  color: black;
  font-size: xx-large;
  border: 3px solid rgb(223, 217, 217);
  border-left-color: rgb(255, 170, 11);
  border-bottom-color: rgb(255, 170, 11);
  padding: 15px;
  border-radius: 100%;
}

.mod-container {
  display: flex;
}

.mod {
  font-size: large;
  margin-left: 10px;
  color: black;
}

【问题讨论】：

标签： html css jsx

【解决方案1】：

我会稍微更改一下您的 html。您可以拥有第二个带有 flex-direction: column 的 flex 容器。

<div className="second-col-container">
<h2>Air Quality Index</h2>
<div className="mod-container">
    <span className="index">58</span>
</div>

<div className="para-mod">
    <span className="mod">Moderate</span>
    <div>
    Air quality is acceptable; however, for some pollutants there may be a
    moderate health concern for a very small number of people who are
    unusually sensitive to air pollution.
    </div>
</div>
</div>;

CSS

.para-mod {
    font-size: small;
    width: 50%;
    color: grey;
    display: flex;
    flex-direction: column;
}

【讨论】：