Flexbox bottom align

Question

I have the following layout http://jsbin.com/joyetaqase/1/edit?html,css,output

<div class="row">

    <div class="col">
      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
      <p>my footer</p>
    </div>

     <div class="col">
      <h2>Lorem Ipsum.</h2>
      <p>my footer</p>
    </div>

  </div>

Using flexbox I'm trying to make the same height and the same width in a div .col.

My question is: how can I put <p>in the bottom of the window?

The layout should look like this:

I know what I can do <p>absolute and use bottom:0;, but I want to achieve this with flexbox, is this possible?

Can someone explain?

Answer 1

You can take the next path. Give display: flex; flex-direction: column;to .coland flex: 1 0 auto;beforeh2

.row {
  width: 500px;
  font-family: monospace;
  display:flex;
}

.col {
  width: 50%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
    flex-direction: column;
}

h2, p {
  font-weight: normal;
  margin: 0;
}

h2 {
    flex: 1 0 auto;
}

 <div class="row">
    
    
    <div class="col">
      <h2>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</h2>
      <p>my footer</p>
    </div>
    
     <div class="col">
      <h2>Lorem Ipsum.</h2>
      <p>my footer</p>
    </div>
    
    
  </div>

Run code

Updated JSBin

Answer 2

.col .

.col {
  width: 50%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;

  /* NEW */
  display: flex;
  flex-direction: column;          /* stack <h2> and <p> vertically */
  justify-content: space-between;  /* align <h2> at top and <p> at bottom */
}

Answer 3

Give the relative positioning to the parents ( .col), and then give the absolute positioning of the footer with the attribute bottom:0px;.

Jsbin

.col {
  width: 50%;
  border: 1px solid #000;
  padding: 10px;
  box-sizing: border-box;
  position:relative;
}

p{
  position:absolute;
  bottom:0px;
}