How to flex-end one child and nothing else

Question

I am trying to have only div3 and nothing else on the flex-end of .app.

If I use the following code:

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

I get div3 where I want it but everything else also follows it down to the bottom of the screen.

So I tried this, which did not work:


.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>

@dgknca I was messing around with the properties I may find a different solution with the information you provided, but should thew following code work? ``` .app > .div3 { justify-content: flex-end; }``` — Caleb, Aug 15 '20 at 17:42

score 0 · Answer 1 · answered Aug 15 '20 at 17:45

0

.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>

answered Aug 15 '20 at 17:45

devd

693
4
11

Is this what you need? – devd Aug 15 '20 at 17:45

How to flex-end one child and nothing else

1 Answers1