Can I change the “justify-content” value depending on the number of elements in the flex container?

Question

I am working on an image gallery on a legacy site. I can\'t use anything other than regular old HTML/jQuery or JS/CSS. I know this would be a lot easier with Bootstrap or so

Answer 1

How about using margin instead of justify-content:space-between to get the spacing?

/* outer container */
.flex-container {
  padding: 24px 0;
  background: white;
  border: solid 1px rgba(0,0,0,.1);
  max-width: 700px; /* or whatever */
  
  /* flex props */
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
}

/* contains img block and title */
.thumb-grid {
  border: solid 1px rgba(0,0,0,.1);
  width: 150px;
  margin: 0 12px 36px;
}

.thumb-grid:first-of-type { margin-left: 0; }
.thumb-grid:nth-of-type(4) { margin-right: 0; }

.thumb-grid p {
  text-align: center;
}

.img-block {
  background: black;
  height: 150px;
}

.img-block img {
  height: 150px;
  opacity: 1;
  transition: opacity 150ms;
}

.img-block:hover img {
  opacity: .9;
}

    
    
      
      
        
                
      
      
      
Image 1
      
    
    
    
      
      
        
                
      
      
      
Image 2
      
    
    
   
      
      
        
                
      
      
      
Image 3
      
    
    
    

      
       
                
      
      
      
Image 4
      
    
    
    
      
      
        
                
      
      
      
Image 5
      
    
    
    
      
      
        
                
      
      
      
Image 6
      
    
    
   
      
      

                
      
      
      
Image 7