Căn chỉnh hình ảnh trên hai hàng với flexbox

Question

Tôi đang cố gắng tạo một flexbox với 6 hộp đi qua trang.

Tuy nhiên, vì lý do nào đó, nó sẽ không hoạt động bình thường vì chúng có kích thước khác nhau.

họ phải cư xử như thế này:

/* ================================= 
 
     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>

Bạn có thể xem JSFIDDLE ĐÂY: https://jsfiddle.net/ju157mnj/2/

Answer 1

Hình ảnh của bạn khá lớn và các truy vấn phương tiện của bạn hơi khó chỉnh sửa. Tuy nhiên, flex đủ mạnh để bạn không cần truy vấn phương tiện. Dưới đây là hai ví dụ về cách bạn có thể trình bày hình ảnh của bạn (không chắc chắn về cách bạn muốn chúng).

Wraps:

.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 mỗi Row (không bọc):

.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

Made những thay đổi này để css của bạn:

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/