Flexbox项目与下一行

Question

我尝试在小块之间建立一个有两个大块的画廊是行不通的。大块与下面的两个块重叠。

是否可以防止CSS与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>

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

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