Flexbox 项目与下一行项目重叠 [重复]答案

【问题标题】：Flexbox item overlaps next row item [duplicate]Flexbox 项目与下一行项目重叠 [重复]
【发布时间】：2018-07-20 01:52:14
【问题描述】：

我尝试在小块之间建立两个大块的画廊不起作用。大块与下面的两个块重叠。

是否可以使用 CSS 防止块重叠？我在堆栈溢出时找不到类似的代码示例或问题。

.gallery-grid {
  margin: 0 auto;
  padding: 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.gallery-grid .image-responsive {
  width: 100%;
}
.gallery-grid .cell {
  margin: 10px 10px;
  width: 110px;
  height: 110px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.gallery-grid .cell.big {
  flex: 0 240px;
}

<div class="gallery-grid">
    <div class="row"></div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell big">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
</div>

两个红色标记的块不应重叠。

【问题讨论】：

overflow:hidden ?
如果您希望紧接在下方的 2 个项目被推到右侧（或向下），那么这将不适用于 Flexbox，除非您添加脚本。
看起来像 CSS-Grid 的案例...

标签： css user-interface flexbox overlapping

【解决方案1】：

.gallery-grid {
  margin: 0 auto;
  padding: 30px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-direction: row;
  flex-direction: row;
}
.gallery-grid .image-responsive {
  width: 100%;
}
.gallery-grid .cell {
  margin: 10px 10px;
  width: 110px;
  height: 110px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
}
.gallery-grid .cell.big {
  flex: 0 240px;
}

<div class="gallery-grid">
    <div class="row"></div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell big">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
    <div class="cell ">
        <img src="http://placehold.it/110x110" class="image-responsive">
    </div>
</div>

【讨论】：