Aligning form elements to bottom of flexbox unit, but keep text at the top

Question

I'm very new to this, but am trying to put together a page that is a little above my pay grade so far, and it seems to be working well enough, but I cannot seem to figure out how to get the 'input' to stay at the bottom of the flex box and keep the text and image at the top. I have the feeling it's an hierarchy or parent/child issue, but I can't seem to get my brain around it. SO far I have tried everything I know how, but here's where I'm at now...

I've created a separate "DIV ID" with its own set of rules for the input which state that the input)s) should: "align-self: flex-end;" Still not working.. Any ideas would be very much appreciated!

 body { background-color: #faf8ed; }.header { background-color: black; padding: 21px; border-radius: 25px; } img { max-width: 100%; flex-wrap: wrap; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; display: block; } h1 { font-family: 'Modak', cursive; font-variant: small-caps; letter-spacing: 2px; text-align: center; font-weight: normal; } p { font-family: 'Amatic SC', cursive; font-weight: bold; font-size: 16px; } #container1 { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; height: 100%; align-items: stretch; padding-top: 37px; } #one { border: 1px solid beige; font-family: Arial; font-size: .75em; padding: 10px; width: 200px; margin-left: 7px; margin-right: 7px; margin-top: 7px; margin-bottom: 7px; border-radius: 25px; background-color: beige; } #bottom { display: flex; align-self: flex-end; }.zoom { transition: transform.3s; /* Animation */ margin: 0 auto; } #quantity { display: flex; font-family: Arial; font-size: 1.5em; font-family: 'Amatic SC', cursive; font-weight: bold; text-align: center; padding-right: 3px; } #buy { display: flex; font-family: Arial; font-size: 1.5em; font-family: 'Amatic SC', cursive; font-weight: bold; border-radius: 7px; }

 <div id="container1"> <div id="one" class="zoom"> <h1>KING GIZZARD ROCKS.</h1> <img src="tshirt_2:jpg"> <p> This is the text for this shirt! </p> <form action=""> <div id="bottom"> <label for="quantity" id="quantity">Quantity:</label> <input type="number" name="quantity" min="1" max="30" placeholder="0"> <br> <input type="submit" id="buy" value="BUY"> </div><!--bottom--> </form> </div><!--one--> <div> <!--container-->

Answer 1

align-self: flex-end would work if the parent was a flex container (ie, the parent had display: flex or display: inline-flex ). But in this case, the parent ( form ) is not a flex container, so the children will ignore flex properties.

Flex properties only work between parent and child elements. Read more about the scope of flex layout here: Proper use of flex properties when nesting flex containers

Without changing your HTML (which could be made more efficient), you could achieve the desired layout by making the #one element a flex container in column direction, and applying auto margins to the form element.

In the example below I've also removed a lot of unnecessary code (at least for demo purposes).

 #container1 { display: flex; /* flex-direction: row; */ /* flex-wrap: wrap; */ justify-content: center; height: 100vh; /* adjustment */ /* align-items: stretch; */ /* padding-top: 37px; */ } /*.header { background-color: black; padding: 21px; border-radius: 25px; } */ #one { /* border: 1px solid beige; */ font-family: Arial; font-size: .75em; padding: 10px; width: 200px; /* margin-left: 7px; */ /* margin-right: 7px; */ /* margin-top: 7px; */ /* margin-bottom: 7px; */ /* border-radius: 25px; */ background-color: beige; display: flex; /* new */ flex-direction: column; /* new */ } img { max-width: 100%; /* flex-wrap: wrap; */ /* margin-left: auto; */ /* margin-right: auto; */ /* margin-top: auto; */ /* margin-bottom: auto; */ /* display: block; */ } h1 { font-family: 'Modak', cursive; font-variant: small-caps; letter-spacing: 2px; text-align: center; font-weight: normal; margin-top: 0; /* new */ } p { font-family: 'Amatic SC', cursive; font-weight: bold; font-size: 16px; } form { margin-top: auto; /* new */ } #bottom { display: flex; /* align-self: flex-end; */ }.zoom { transition: transform.3s; /* Animation */ margin: 0 auto; } #quantity { display: flex; font-family: Arial; font-size: 1.5em; font-family: 'Amatic SC', cursive; font-weight: bold; text-align: center; padding-right: 3px; } #buy { display: flex; font-family: Arial; font-size: 1.5em; font-family: 'Amatic SC', cursive; font-weight: bold; border-radius: 7px; } body { background-color: #faf8ed; margin: 0; /* new */ } * { box-sizing: border-box; }

 <div id="container1"> <div id="one" class="zoom"> <h1>KING GIZZARD ROCKS:</h1> <img src="http.//i.imgur.com/60PVLis:png"> <p>This is the text for this shirt!</p> <form action=""> <div id="bottom"> <label for="quantity" id="quantity">Quantity:</label> <input type="number" name="quantity" min="1" max="30" placeholder="0"> <br> <input type="submit" id="buy" value="BUY"> </div><!--bottom--> </form> </div><!--one--> <div><!--container-->

jsFiddle demo