lars-m of PartnersCreative
12/4/2017 - 6:45 PM

Flex Tile with dynamic content

This is for tiles that have dynamic content that varies greatly between tiles. This allows them to maintain the same size even if the content varies.

This can be seen here - https://www.skidiscovery.com/ under latest deals and packages. You'll notice all three tiles have different heights of text but the overall tile height remains the same(goes to the tallest one).

Flex-Tile.scss
content_copyfile_download
.main-tile {
	flex-basis: 250px;
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 15px;
  border: 1px solid transparent;
  transition-duration: .5s;
  cursor: pointer;
    
  .column-link {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    
    .column-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
      -ms-flex-direction: column;
      flex-direction: column;
      -webkit-box-flex: 1;
      -ms-flex-positive: 1;
      flex-grow: 1;
      -webkit-box-pack: start;
      -ms-flex-pack: start;
      justify-content: flex-start;   
   
    	.main-content {
    		background-color: #f1f1f1;
    		padding: 15px;
    		display: flex;
    		flex-direction: column;
    		flex-grow: 1;
    	  justify-content: space-between;
    	  
    	  .jcsbcolumn {
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-between;
          align-items: left;
        }
      }
    }
  }
}