html - 为什么显示: flex cause elements to go upside-down?

Question

我有一个容器的 CSS 样式 <ul class="pillars">...</ul>我添加了 display: flex;将柱子放入容器中并像这样适应它们的宽度

.pillars {
  display: flex;
  background-color: gray;
  flex-flow: row nowrap;
  vertical-align: unset;
  height: 300px;
  padding: 0;
  list-style: none;
}
.pillars .pillar {
  width: 100%;
  background-color: black;
}
.pillars .pillar.active {
  background-color: red;
}

<ul class="pillars">
    <li class="pillar">Lorem</li>
    <li class="pillar">Ipsum</li>
    <li class="pillar">Dolor</li>
    <li class="pillar">Sit</li>
    <li class="pillar">Amet</li>
</ul>

但是display: flex;导致柱子倒置的副作用，如下所示: 支柱是灰色背景上方的黑色条，它们应该看起来像:

Answer 1

您的代码按预期工作。默认情况下，flexbox 将其元素对齐到 flex-start，这意味着元素显示在固定高度容器的顶部。通过将 align-items: flex-end 添加到您的 flexbox，您将获得所需的结果:

.pillars {
  display: flex;
  background-color: gray;
  flex-flow: row nowrap;
  vertical-align: unset;
  height: 300px;
  padding: 0;
  list-style: none;
  align-items: flex-end;
}

.pillars .pillar {
  width: 100%;
  background-color: black;
  width: 20px;
}

.pillar:nth-child(3n) {
  height: 200px;
}

.pillar:nth-child(3n + 2) {
  height: 250px;
}

.pillar:nth-child(3n -2) {
  height: 150px;
}

.pillars .pillar.active {
  background-color: red;
}

<ul class="pillars">
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
  <li class="pillar"></li>
</ul>