Allineamento di immagini su due righe con flexbox

Question

Sto provando a creare un flexbox con 6 caselle che attraversano la pagina.

Tuttavia, per qualche motivo non si comporterà correttamente in quanto hanno dimensioni diverse.

devono comportarsi in questo modo:

/* ================================= 
 
     Base Styles 
 
    ==================================== */ 
 

 
body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    min-height: 100vh; 
 
} 
 
.row { 
 
    flex: 1; 
 
} 
 
/* ================================= 
 
     Media Queries 
 
    ==================================== */ 
 

 
@media (min-width: 769px) { 
 
    .main-header, 
 
    .main-nav, 
 
    .row { 
 
    display: flex; 
 
    } 
 
    .main-header { 
 
    flex-direction: column; 
 
    align-items: center; 
 
    } 
 
    .col { 
 
    flex: 1 50%; 
 
    } 
 
    .row { 
 
    flex-wrap: wrap; 
 
    } 
 
    .item-2 { 
 
    order: -1; 
 
    } 
 
} 
 
@media (min-width: 1025px) { 
 
    .main-header { 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    } 
 
    .col { 
 
    flex-basis: 0; 
 
    } 
 
    .item-1 { 
 
    flex-grow: 1.4; 
 
    } 
 
}

<div class="row"> 
 

 
    <div class="item-1 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.primary--> 
 

 
    <div class="item-2 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.secondary--> 
 

 
    <div class="item-3 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-4 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-5 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-6 col"> 
 
    <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
</div>

è possibile visualizzare i JSFIDDLE QUI: https://jsfiddle.net/ju157mnj/2/

Answer 1

Le tue immagini erano piuttosto massicce e con le tue query multimediali era un po 'difficile da modificare. Tuttavia, flex è abbastanza potente da non dover richiedere query multimediali. Di seguito sono riportati due esempi di come potresti presentare le tue immagini (non sono sicuro di come le hai volute).

involucri:

.row { 
    display: flex; 
    flex-wrap: wrap; 
} 

.col { 
    flex-grow: 1; 
    margin: 5px; 
    text-align: center; 
} 

.col img { 
    height: 60px; 
    width: 90px; 
} 

Fiddle: https://jsfiddle.net/awvpezbt/

3 per riga (senza involucro):

.row { 
    display: flex; 
} 

.col { 
    flex-grow: 1; 
    margin: 5px; 
    text-align: center; 
} 

.col img { 
    height: 60px; 
    width: 90px; 
} 

Fiddle: https://jsfiddle.net/awvpezbt/1/

Answer 2

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

 
.col { 
 
    flex: 0 0 calc(33.33% - 30px); /* flex-basis adjustment for margin */ 
 
    margin: 5px; 
 
} 
 

 
img { 
 
    width: 100%; 
 
}

<div class="row"> 
 

 
    <div class="item-1 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.primary--> 
 

 
    <div class="item-2 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.secondary--> 
 

 
    <div class="item-3 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-4 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-5 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
    <div class="item-6 col"> 
 
     <img src="http://blackrockdigital.github.io/startbootstrap-freelancer/img/portfolio/cabin.png"> 
 
    </div><!--/.tertiary--> 
 

 
</div>

Revised Fiddle

Answer 3

apportate queste modifiche al css:

img { 
    max-width: 100%; //Keeps the img in its container 
} 
.col { 
    padding: 0 1em; 
    flex: 1; 
    min-width: 200px; 
} 
.row { 
    flex: 1; 
    display: flex; 
    flex-wrap: wrap; 
} 

https://jsfiddle.net/v2tuoojd/