フレックスボックスで2列に画像を整列する

Question

フレックスボックスを作成しようとしています。

ただし、何らかの理由により、サイズが異なるため正しく動作しません。

彼らはこのように振る舞う必要があります。

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

はあなたがここにJSFIDDLEを表示することができます：https://jsfiddle.net/ju157mnj/2/

Answer 1

あなたのイメージは非常に大量でしたし、メディアのクエリでは編集するのが少し難しかったです。 、flexは、メディアクエリを必要としないほど強力です。以下はあなたのイメージをどのように表示するかの2つの例です（あなたがそれらを望んでいるかどうかは分かりませんでした）。

ラップ：

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

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

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

フィドル：https://jsfiddle.net/awvpezbt/

3行ごと（ノーラップ）：

.row { 
    display: flex; 
} 

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

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

フィドル：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

はあなたの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/