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属性来实现此效果。请参阅以下示例：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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执行正确且响应灵敏的Image Grid视图

3 个答案: