Flexbox - 如何控制高度与宽度成正比？

Question

如何控制flexbox的高度,使其在元素增长时与宽度成比例？我希望高度.inner随着宽度的变化与给定的比例保持成比例.

我看到的所有flexbox示例都在宽度变化时保持高度不变,或者增长到足以包含其内容.

(HAML)

.outer
  .inner
    %img
  .inner
  .inner

如果我们在其中包含图像......或者可能不是,那么这个例子也许会有所帮助.只是抛出一个想法.

(SASS)

.outer {
  display: flex;      

  .inner {
    flex: 1 1 auto;

  }
}

Answer 1

没有特定于flexbox的方法可以管理此方法。

有一个众所周知的padding-bottom技巧可以允许这样做，但是它需要一个伪元素（优先选择）和一个​​内部绝对定位的div来容纳内容。

参考网页链接

如您所知，绝对定位有些不灵活，因此布局内容将是主要问题。

将此应用到flexbox：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.outer {
  display: flex;
  width: 500px;
  margin: 1rem auto;
  align-items: flex-start;
}
.inner {
  flex: 1 1 auto;
  border: 1px solid grey;
  position: relative;
}
.inner:before {
  content: "";
  display: block;
  padding-top: 100%;
  /* initial ratio of 1:1*/
}
.content {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}
/* otehr ratios */

.ratio2_1:before {
  padding-top: 50%;
}
.ratio1_2:before {
  padding-top: 200%;
}
.ratio4_3:before {
  padding-top: 75%;
}
.ratio16_9:before {
  padding-top: 56.25%;
}

<div class="outer">
  <div class="inner">
    <div class='content '>Aspect ratio of 1:1</div>
  </div>
  <div class="inner ratio2_1">
    <div class='content'>Aspect ratio of 2:1</div>
  </div>
  <div class="inner ratio16_9">
    <div class='content'>Aspect ratio of 16:9</div>
  </div>
</div>