如何使用 display:flex 进行正确且响应迅速的图像网格视图

Question

我很困惑 display:flex 如何获得像这样的响应式图像网格..

提前致谢。我已经尝试了很多 Whosebug 答案，但都没有用

现在我有这样的布局...

但我想要这样的布局...

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>

如何使用 display:flex 进行正确且响应迅速的图像网格视图

How to do proper and responsive Image Grid view with display:flex

html

css

grid

css-float

flexbox