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

Posted 2023-03-05

【中文标题】如何使用 display:flex 进行正确且响应迅速的图像网格视图 [重复]

【英文标题】：How to do proper and responsive Image Grid view with display:flex [duplicate]

【发布时间】：2017-04-12 07:50:55

【问题描述】：

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

提前致谢。我已经尝试了很多 *** 答案，但没有奏效

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

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

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;

【参考方案1】：

您可以使用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, .grid1float: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>

【讨论】：

能否请您发布任何示例

codepen.io/githubitsme/pen/NbarmP

太好了，你有它@Nane

【参考方案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

【讨论】：

不工作！！！它给了我总网格垂直对齐

@Nane 你用的是什么浏览器？

Chrome 从版本 29 (2013) 开始支持 Flex 框。

codepen.io/githubitsme/pen/NbarmP

【参考方案3】：

使用像 bootstrap 这样的框架会让生活更轻松。

Bootstrap 网格系统可以轻松实现。

【讨论】：

不@NingJi 我想学这些东西......

codepen.io/githubitsme/pen/NbarmP