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来保存内容。

Reference Web Link

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

将此应用于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>

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

1 个答案: