flexbox: align self and align item are not woking

Question

<td>
   <div class="paper" style="display:flex; ">
      <div class="row" style="height: 20px; background-color: "></div>
   </div>
</td>

In the .paper, justify content works fine but align-items wont work. where as in its child class .row, align-self wont work. Before this <td> i have set a flex property as well. the code looks like this:

<td>
   <div class="wrapper" style="display: flex;">
      <div class="close" style="align-self: center;">
         <i class="icon fa fa-times"></i>
      </div>
      <div class="image ml-15">
         <img class="width-100" src="commercial/front-end/shop/lauren-winter-studio-top-natural_0190-cropped.jpg" alt="">
      </div>
      <div class="details pull-right ml-20" style="align-self: center;">
         <span>Cream Top</span>
      </div>
   </div>
</td>
<td>
   <div class="paper" style="display:flex; ">
      <div class="row" style="height: 20px; background-color: "></div>
   </div>
</td>

Answer 1

Make sure you have set the width or height on the right direction of the parent element when you use align-self/align-item.

Answer 2

You have to provide some hardcoded height and width to ".paper" class in order to use align-self/align-item. https://jsfiddle.net/akash94/thpub2ej/2/

.paper{
      display:flex;
      height:200px;
      width:200px;
      border:1px solid lightblue;
      align-items:center;
      justify-content:center
      }

.row{
      align-self:flex-end;
    }