html - 如何弯曲结束一个孩子而不是别的

Question

我试图在 .app 的 flex-end 上只有 div3 而没有其他内容。

如果我使用以下代码：

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    justify-content: flex-end;
}

我在我想要的地方得到了 div3，但其他所有内容也跟随它到屏幕底部。

所以我尝试了这个，但没有奏效：

.app {
    display: flex;
    flex-direction: column;
    height: 100vh;
}


.app > .div3 {
    justify-content: flex-end;
}

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app>.div3 {
  justify-content: flex-end;
}

<div class="app">
  <div class="div1">
    <h1>Hello</h1>
    <div class="div2">
      <h1>Hello</h1>
      <div class="div3">
        <h1>Hello</h1>
        <input type="input" class="input">
      </div>
    </div>
  </div>
</div>

标签： htmlcss

Answer 1

.app {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.div3 {
  align-items: flex-end;
   flex-direction: column;
   display: flex;
}

<div class="app">
  <div class="div1">
    <h1>Hello</h1>
      </div>
    <div class="div2">
      <h1>Hello</h1>

    </div>
          <div class="div3">
        <h1>Hello</h1>
        <input type="input" class="input">
      </div>

</div>