flex 容器破坏了边界半径，如何解决这个问题？

Posted 2023-02-21

【中文标题】flex 容器破坏了边界半径，如何解决这个问题？

【英文标题】：flex container ruining a border-radius, How to fix this?

【发布时间】：2020-12-28 11:16:56

【问题描述】：

我的定位完全符合我的要求，但 58 周围的圆圈应该是一个完美的圆圈，而是根据容器中的内容进行调整。我该如何解决这个问题？

这是https://i.stack.imgur.com/Tb75A.png 的样子 这是我需要它看起来像https://i.stack.imgur.com/LgQFI.png

这里是 JSX

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

             <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>
        </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: 60%;
  color: grey;
  display: flex;
  flex-direction: column;
  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;

  color: black;

【问题讨论】：

没关系。我没有看到 JSX。我的错。再次点赞。 :)

@BobRodes 他们将标记发布为 JSX。类语法是 camelCase。

【参考方案1】：

我会先给圆圈一个固定的height 和width。然后给它一个border-radius of 50%。这将解决第一个问题（使其成为一个完美的圆圈）。

文本居中的第二个问题。给 span 一个 display: flex 然后使用 align-items: center; 和 justify-content: center; 就可以了。

.index 
    margin: 5px 0 0 5px;
    color: black;
    height: 50px;
    width: 50px;
    position: relative;
    align-items: center;
    justify-content: center;
    display: flex;
    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: 50%;

【参考方案2】：

仅将 display: flex 应用于父 div .mod-container.，包含 2 位数字的 <span class="index"> 元素正在增长以填充其父容器的内容。

接下来，我将.mod-container flexbox 内容以justify-content: center 居中，并使用align-items: flex-start 对齐。这似乎与您想要的图像相匹配。 （如果需要，我可以将类语法更新为 JSX）

.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;
  color: grey;
  display: flex;
  flex-direction: column;
  margin-left: 10px;


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


.mod-container 
  display: flex;
  justify-content: center;
  align-items: flex-start;

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

     <div class="para-mod">
       <span class="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>
</div>