Display flex a few block with text in the same line

Question

I am trying to create a few block/box with image and two text - headline and subtext, but headline sometimes has one sentence, but another more, so if one has one and second one has two I would like to center vertically this first one.

For subtext I would like to vertically to the top.

Here is code which I am trying to use:


    
        
        
            Schody
            Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.
        
    
    
        
        
            Balustrady i ogrodzenia
            Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.
        
    
    
        
        
            Meble
            Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.

Here is CSS:

    #home .text {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    position: relative;
    text-align: center;
    padding: 10px 20px 30px;
    margin: 0px auto 40px;
    width: 100%;
    height: 100%;
    max-width: 236px;
    z-index: 1;
}

#home .text h2 {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    position: relative;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 0px;
        z-index: 2;
    }
#home .text h3 {
    position: relative;
    color: white;
    font-size: 12px;
    text-align: justify;
    text-transform: uppercase;
    text-align-last: center;
    z-index: 2;
}

It almost work, but if h3 has less text in one of blocks this text align to the bottom and h2 goes down.

Here is live website to test

I create picture to show how it should work

Asons · Accepted Answer

Since the h2 elements aren't aware of each other, I suggest you give them a height, or else you will need a extensive markup change

Here I added height: 28px; to the .row-home .text h2 rule

.row-home .text {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    position: relative;
    text-align: center;
    padding: 10px 20px 30px;
    margin: 0px auto 40px;
    width: 100%;
    height: 100%;
    max-width: 236px;
    z-index: 1;
}

.row-home .text h2 {
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
    justify-content: center;
    flex: 1 0 auto;
    position: relative;
    color: white;
    font-size: 14px;
    height: 28px;
    font-weight: bold;
    text-transform: uppercase;
    margin-top: 40px;
    margin-bottom: 0px;
        z-index: 2;
    }
.row-home .text h3 {
    position: relative;
    color: white;
    font-size: 12px;
    text-align: justify;
    text-transform: uppercase;
    text-align-last: center;
    z-index: 2;
}





  
    
      
      
        Schody
        Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.
      
    
    
      
      
        Balustrady i ogrodzenia
        Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.
      
    
    
      
      
        Meble
        Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.

Updated with a second version based on a comment

If you want this to be really dynamic, you'll need to break it down like this, where you make the col-sm-4 flex items

Updated again, with a media query, to utilize Flexbox's order property and re-position the elements on smaller screens

.row-home {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.row-home .col-sm-4 {
  min-width: 0;
  flex-basis: 33%;
  padding: 10px 20px 30px;
}

.row-home .col-sm-4.vcentered {
  align-self: center;
}

.row-home .col-sm-4 h2 {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.row-home .col-sm-4 h3 {
  font-size: 12px;
  text-align: justify;
  text-transform: uppercase;
  text-align-last: center;
}

@media (max-width: 600px) {
  .row-home .col-sm-4 {
    flex-basis: 51%;
  }
  .row-home .col-sm-4 * {
    text-align: center;
  }
  .row-home .col-sm-4:nth-child(3n+1) {
    order: 1;
  }
  .row-home .col-sm-4:nth-child(3n+2) {
    order: 2;
  }
  .row-home .col-sm-4:nth-child(3n+3) {
    order: 3;
  }
}




  
    
      
    
    
      
    
    
      
    

    
      Schody this is some extra text I added for test
    
    
      Balustrady i ogrodzenia
    
    
      Meble
    

    
      Lorem ipsum dolor sit amet, consectetur adipi scing elit.
    
    
      Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.
    
    
      Lorem ipsum dolor sit amet, consectetur adipi scing elit. Nulla volut pat sem id turpis tempus efficitur. Maecenas eu bibendum sem.

Display flex a few block with text in the same line

Answers (1)

Related Questions