如何做正確的響應和圖像網格視圖與顯示：彎曲

Question

我很困惑與display:flex是如何得到響應圖像電網這樣的..提前

感謝。我已經嘗試了許多StackOverflow的答案，但它並沒有工作

現在我有佈局是這樣的...

但我想我的佈局是這樣的...

HTML代碼：

<div class="makeExploreCenter"> 
    <div class="explorePost"> 
     <img src="skyline-buildings-new-york-skyscrapers.jpg" /> 
     <div class="likesdetails"> 
      <div class="propicthumnail"> 
      </div> 
     </div> 
    </div> 
    <div class="explorePost"> 
     <img src="url.jpg" /> 
     <div class="likesdetails"> 
      <div class="propicthumnail"> 
      </div> 
     </div> 
    </div> 
    <div class="explorePost"> 
     <img src="ymbpp1l.jpg" /> 
     <div class="likesdetails"> 
      <div class="propicthumnail"> 
      </div> 
     </div> 
    </div> 
    <div class="explorePost"> 
     <img src="skyline-buildings-new-york-skyscrapers.jpg" /> 
     <div class="likesdetails"> 
      <div class="propicthumnail"> 
      </div> 
     </div> 
    </div> 
    <div class="explorePost"> 
     <img src="url.jpg" /> 
     <div class="likesdetails"> 
      <div class="propicthumnail"> 
      </div> 
     </div> 
    </div> 
    <div class="explorePost"> 
     <img src="ymbpp1l.jpg" /> 
     <div class="likesdetails"> 
      <div class="propicthumnail"> 
      </div> 
     </div> 
    </div> 
</div> 

CSS代碼

.makeExploreCenter{ 
    width: 90%; 
    margin: 0 auto; 
    display: flex; 
    flex-wrap:wrap ; 
    justify-content: center; /* align horizontal */ 
    align-items: center; /* align vertical */ 
} 
.explorePost{ 
    text-align: center; 
    margin: 5px; 
    max-width: 300px; 
    min-width: 300px; 
    align-self: flex-start; 
    background: #545454; 
} 
.explorePost img{ 
    max-height: 60vh; 
    max-width: 100%; 
    max-height: 70vh; 
} 
.likesdetails{ 
    width: 100%; 
    height: 44px; 
    background: #FAFAFA; 
    margin-top: -3px; 
    overflow: auto; 
    overflow: hidden; 
    display: flex; 
} 

Answer 1

使用類似bootstrap的框架將使生活更輕鬆。

Bootstrap網格系統可以輕鬆實現。

Answer 2

您可以使用flex-diretion: column屬性來實現該效果。請看下面的例子：

.grid{ 
 
    display:flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap; 
 
    width:400px; 
 
    height:400px; 
 
    list-style:none; 
 
} 
 

 
img{ 
 
    width:100px; 
 
    height:auto; 
 
    display:block; 
 
}

<ul class="grid"> 
 
    <li><img src="http://lorempixel.com/100/140/"/></li> 
 
    <li><img src="http://lorempixel.com/100/150/"/></li> 
 
    <li><img src="http://lorempixel.com/100/125/"/></li> 
 
    <li><img src="http://lorempixel.com/100/160/"/></li> 
 
    <li><img src="http://lorempixel.com/100/90/"/></li> 
 
    <li><img src="http://lorempixel.com/100/130/"/></li> 
 
    <li><img src="http://lorempixel.com/100/52/"/></li> 
 
    <li><img src="http://lorempixel.com/100/159/"/></li> 
 
    <li><img src="http://lorempixel.com/100/60/"/></li> 
 
    <li><img src="http://lorempixel.com/100/69/"/></li> 
 
    <li><img src="http://lorempixel.com/100/85/"/></li> 
 
</ul>

codepen

Answer 3

您可以用float

例做到這一點：

---- first div ---- ---- second div --- -------AND----- 
4G3Y5B6GBY3G7W10P-- ----5G5W5E6B10P10W- ----SO--------- 
Picture------------ ----Picture-------- -------ON------ 
------------------- ------------------- --MORE PICTURES 
The text related to Content related to- --MORE TEXT---- 
this--------------- this--------------- ----MORE SPACE- 
----Another picture ----Another picture ---Another----- 
3B6G6B7GYB3G7W10P-- ----6B7B8B7WBG10YP- ---content----- 
Picture------------ ---Picture--------- Modern content- 
------------------- ------------------- --------------- 
The text related to Related to picture- --------------- 
the another picture above-------------- Whatever------- 
-- end first div -- -- end second div-- --------------- 

真實的例子：
CSS：

.grid0, .grid1{float:left;margin-right:30px;} 

HTML：

<div class='maingrid'> 
    <div class='grid0'> 
    <img src='http://lorempixel.com/100/140/' style='width:100px; height:100px;' /><br> 
    The text to the picture number 1.0<br> 
    <img src='http://lorempixel.com/100/140/' style='width:100px;height:100px;' /><br> 
    The text to the picture number 1.1 
    </div> 
    <div class='grid1'> 
    <img src='http://lorempixel.com/100/150/' style='width:100px;height:100px;' /><br> 
    The text to the picture number 2.0<br> 
    <img src='http://lorempixel.com/100/140/' style='width:100px;height:100px;' /><br> 
    The text to the picture number 2.1 
    </div> 
    <div class='grid2'> 
    <img src='http://lorempixel.com/100/125/' style='width:100px;height:100px;' /><br> 
    The text to the picture number 3.1<br> 
    <img src='http://lorempixel.com/100/140/' style='width:100px;height:100px;' /><br> 
    The text to the picture number 3.1 
    </div> 
    </div>