Question

我正在使用flex创建偶数列和vh以使它们具有相同的高度。这工作正常，但在列中我可以有x个项目。我希望每列中的元素均匀高度，具体取决于存在多少项（使用css）。

1 = 100％ 2 = 50％ 3 = 33.33％等

我知道我可以通过JS做到这一点，但我想通过flex，grid或者其他东西通过css自动执行此操作。

Answer 1

我试过复制你的问题。在flex: 1上使用.item，以便每个项目占用相同的空间（根据问题陈述）。

请看下面的代码段：

＆＃13;

body {
  margin: 0;
}

.parent {
  width: 80%;
  padding: 20px;
  display: flex;
  border: 1px solid red;
}

.child {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
  padding: 20px;
  border: 1px solid blue;
  height: 60vh;
}

.item {
  flex: 1;
  background: lightGreen;
  border: 1px solid green;
}

＆＃13;

<div class="parent">
  <div class="child">
    <div class="item">33.33%</div>
    <div class="item">33.33%</div>
    <div class="item">33.33%</div>
  </div>
  <div class="child">
    <div class="item">50%</div>
    <div class="item">50%</div>
  </div>
  <div class="child">
    <div class="item">100%</div>
  </div>
</div>

＆＃13;

希望这是你想要实现的目标。

Answer 2

这就是您使用 Flexbox 所需的一切：

.flex-container {
  display: flex;
}

.flex-item {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.item {
  flex: 1;
  border: 1px solid;
}

<div class="flex-container">
  <div class="flex-item">
    <div class="item">1/1</div>
  </div>
  <div class="flex-item">
    <div class="item">1/2</div>
    <div class="item">1/2</div>
  </div>
  <div class="flex-item">
    <div class="item">1/3</div>
    <div class="item">1/3</div>
    <div class="item">1/3</div>
  </div>
  <div class="flex-item">
    <div class="item">1/4</div>
    <div class="item">1/4</div>
    <div class="item">1/4</div>
    <div class="item">1/4</div>
  </div>
</div>

如何在列中获得未知元素的高度？

2 个答案: