0

I’m developing a website for a mall and I have a shop list made by cards which include a header with name and background photo, the shop description and a footer with the shop link and a share button.

All the cards have the same height, the header with title and background image have a fixed height in px, and the footer will be at the bottom of the card.

So far I’ve got it easily but the descriptions are driving me nuts because they are getting centered vertically and I would like them to be just below the header.

I’ve created a little demo for better understanding.

.container {
  width: 90%;
  min-width: 1000px;
  margin: 0 auto;
}
.row {
  display: flex;
}
.box-b {
  display: flex;
  flex-wrap: wrap;
  flex-basis: 31.1%;
  margin: 0 1.1% 1.1%;
  border: 1px solid gray;

}
.box-header-b {
  width: 100%;
  display: flex;
  padding: 16px;
  height: 192px;
  background-size: contain;
  border: 1px solid red;
}
.box-title {
  align-self: flex-end;
}
p {

  background-color: red;
  align-self: flex-start;
}
.box-b-actions {
  width: 100%;
  padding: 16px;
  border: 1px solid #000;
  align-self: flex-end;
}
  <div class="container">
    <div class="row">
      <div class="box-b">
        <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
          <h2 class="box-title">John</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio?</p>
        <div class="box-b-actions">
          <a href="">Link to home</a>
        </div>
      </div>
      <div class="box-b">
        <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
          <h2 class="box-title">Peter</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime sint iste pariatur cupiditate aliquid nemo reprehenderit unde veritatis est, laboriosam assumenda fuga expedita nam optio porro ullam vitae deleniti culpa!</p>
        <div class="box-b-actions">
          <a href="">Link to home</a>
        </div>
      </div>
      <div class="box-b">
        <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
          <h2 class="box-title">James</h2>
        </div>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis,</p>
        <div class="box-b-actions">
          <a href="">Link to home</a>
        </div>
      </div>
    </div>
  </div>

Thanks in advance and looking forward a solution :)

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
Vicente O.
  • 29
  • 2
  • This is something you want? https://jsfiddle.net/ytxxth56/ – ketan Mar 01 '16 at 09:24
  • You're using `align-self` in a multiline flex container. [**That won't work**](http://stackoverflow.com/a/35020587/3597276). Consider switching to `flex-direction: column` and using [**`auto` margins**](http://stackoverflow.com/a/33856609/3597276). – Michael Benjamin Mar 01 '16 at 12:56

1 Answers1

0

How's this:

 .container {
   width: 90%;
   min-width: 1000px;
   margin: 0 auto;
 }
 
 .row {
   display: flex;
   flex-direction: row;
 }
 
 .box-b {
   display: flex;
   flex-direction: column;
   width: 31.1%;
   margin: 0 1.1% 1.1%;
   border: 1px solid gray;
 }
 
 .box-header-b {
   width: 100%;
   display: flex;
   padding: 16px;
   height: 192px;
   background-size: contain;
   border: 1px solid red;
   box-sizing:border-box;
 }
 
 .box-title {
   align-self: flex-end;
 }
 
 p {
   flex-grow:1;
   background-color: red;
   margin: 0;
 }
 
 .box-b-actions {
   box-sizing:border-box;
   width: 100%;
   padding: 16px;
   border: 1px solid #000;
   align-self: flex-end;
 }
<div class="container">
  <div class="row">
    <div class="box-b">
      <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
        <h2 class="box-title">John</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio?</p>
      <div class="box-b-actions">
        <a href="">Link to home</a>
      </div>
    </div>
    <div class="box-b">
      <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
        <h2 class="box-title">Peter</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis, ipsum at enim voluptas quaerat unde quo sunt odio? Lorem ipsum dolor sit amet, consectetur
        adipisicing elit. Maxime sint iste pariatur cupiditate aliquid nemo reprehenderit unde veritatis est, laboriosam assumenda fuga expedita nam optio porro ullam vitae deleniti culpa!</p>
      <div class="box-b-actions">
        <a href="">Link to home</a>
      </div>
    </div>
    <div class="box-b">
      <div class="box-header-b" style="background-image: url(http://placehold.it/350x150)">
        <h2 class="box-title">James</h2>
      </div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum hic quibusdam iste culpa, tenetur aut dolor ullam nesciunt, aspernatur repellendus perferendis,</p>
      <div class="box-b-actions">
        <a href="">Link to home</a>
      </div>
    </div>
  </div>
</div>
Pete
  • 57,112
  • 28
  • 117
  • 166