在 flex 父级中保持纵横比答案

【问题标题】：Keep aspect ratio inside a flex parent在 flex 父级中保持纵横比
【发布时间】：2020-03-16 00:23:46
【问题描述】：

我知道有很多关于纵横比的话题，但我找不到适合我的问题的答案。

这是我的问题：

我希望在高度为 100% 的 flex 父级中拥有一个具有完美方形纵横比的 div。

这是我的实际 HTML：

<article class="article">
     <header class="article-header">
          <div class="article-header__user">
               <div class="article-header__user-color"></div>
               <p class="article-header__user-name">Damiano Mondaini</p>
          </div>
          <div class="article-header__more">
               <a href="#" class="article-header__more-share-link">
                    <i class="article-header__more-share-icon">S</i>
               </a>
          </div>
     </header>
</article>

这是我的实际 CSS：

.article {
    border-radius: 15px;
    border: 1px solid #134B5F;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.article-header__user {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.article-header__user-color {
    background: red;
}

注意：

<div class="article-header__user"> 是弹性父级
<div class="article-header__user-color"> 是应该是正方形的 div
我不想用JS

提前致谢

【问题讨论】：

但是现在发生了什么？问题出在哪里？
你能把你的代码变成一个SO代码sn-p吗？
我认为你的问题是 <div class="article-header__user-color"> 没有出现对吗？
@RamondeVries 现在什么都没有发生，因为<div class="article-header__user-color"> 没有任何高度或宽度。但我不希望它是一个 100% 高度的正方形。
设置100% height 将不起作用，因为其余代码也缺少高度，您看到的高度基于填充

标签： html css flexbox aspect-ratio

【解决方案1】：

这样试试

HTML

<article class="article">
     <header class="article-header">
          <div class="article-header__user">
               <div class="article-header__user-color">
               <p class="article-header__user-name">Damiano Mondaini</p>
          </div>
          <div class="article-header__more">
               <a href="#" class="article-header__more-share-link">
                    <i class="article-header__more-share-icon">S</i>
               </a>
          </div>
          </div>
     </header>
</article>

css

.article {
    border-radius: 15px;
    border: 1px solid #134B5F;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.article-header__user {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.article-header__user-color {
    background: red;
}

【讨论】：

【解决方案2】：

您在<div class="article-header__user-color"> 上缺少width 和height 这应该是工作代码：

.article {
    border-radius: 15px;
    border: 1px solid #134B5F;
}

.article-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

.article-header__user {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.article-header__user-color {
    background: red;
    width: 15px;
    height: 15px;
}

<article class="article">
     <header class="article-header">
          <div class="article-header__user">
               <div class="article-header__user-color"></div>
               <p class="article-header__user-name">Damiano Mondaini</p>
          </div>
          <div class="article-header__more">
               <a href="#" class="article-header__more-share-link">
                    <i class="article-header__more-share-icon">S</i>
               </a>
          </div>
     </header>
</article>

【讨论】：

感谢您的回答，但我不够明确。我希望<div class="article-header__user-color"></div> 是一个高度为 100% 的正方形

【解决方案3】：

我的问题是该文章或其子项没有任何指定的高度。我会给我的文章标题一个硬编码的高度，它会起作用。谢谢大家。

【讨论】：