html - 如何将两行较小的元素与较大的元素对齐？

Question

我正在尝试创建一个响应式网格，其中两行较小的元素与较大的元素对齐。

我想要实现的目标:

我有什么:

#thumbs {
  background-color: lightcoral;
  width: 100%;
  margin-top: 90px;
  margin-left: auto;
  margin-right: auto;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

#thumbs div {
  vertical-align: top;
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

<div class=container>
  <div id="thumbs">
    <div>
      <a id="single_image1" href="#"><img src="http://dummyimage.com/300x200/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <div>
      <a id="single_image3" href="#"><img src="http://dummyimage.com/100x100/444/fff" alt="" /></a>
    </div>
    <span class="stretch"></span>
  </div>
</div>

jsfiddle:http://jsfiddle.net/7985xjud/

我也尝试过 flexbox:

.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

.flex-item {
  background: tomato;
  padding: 5px;
  margin-top: 10px;
  line-height: 60px;
  color: white;
  font-weight: bold;
  font-size: 2em;
  text-align: center;
}

.big-item {
  width: 300px;
  height: 150px;
}

.small-item {
  width: 100px;
  height: 60px;
}

<ul class="flex-container">
  <li class="flex-item big-item">1</li>
  <li class="flex-item small-item">2</li>
  <li class="flex-item small-item">3</li>
  <li class="flex-item small-item">4</li>
  <li class="flex-item small-item">5</li>
  <li class="flex-item small-item">6</li>
  <li class="flex-item small-item">7</li>
</ul>

代码笔:https://codepen.io/anon/pen/dRBKWr

我该怎么做？

Answer 1

所需的布局flexbox 是不可能的，至少不是以干净高效的方式。原因在这里解释:Is it possible for flex items to align tightly to the items above them?

另一方面，使用 CSS 网格布局布局相对简单。

grid-container {
  display: grid;                                                 /* 1 */
  grid-auto-rows: 50px;                                          /* 2 */
  grid-gap: 10px;                                                /* 3 */
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));  /* 4 */
}

grid-item:first-child {                                          
  grid-column: 1 / 4;                                            /* 5 */
  grid-row: 1 / 3;                                               /* 5 */
}

/* non-essential decorative styles */
grid-item {
  background-color: red;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
}

<grid-container>
  <grid-item>01</grid-item>
  <grid-item>02</grid-item>
  <grid-item>03</grid-item>
  <grid-item>04</grid-item>
  <grid-item>05</grid-item>
  <grid-item>06</grid-item>
  <grid-item>07</grid-item>
  <grid-item>08</grid-item>
  <grid-item>09</grid-item>
  <grid-item>10</grid-item>
  <grid-item>11</grid-item>
  <grid-item>12</grid-item>
  <grid-item>13</grid-item>
</grid-container>

jsFiddle

---

工作原理

1. Establish a block-level grid container. (inline-grid 是另一种选择)
2. grid-auto-rows属性设置自动生成的行的高度。在此网格中，每行高 50 像素。
3. grid-gap property 是 grid-column-gap 和 grid-row-gap 的简写。此规则在 网格项之间设置了 10 像素的间距。 (不适用于元素与容器之间的区域。)

4. grid-template-columns属性设置明确定义的列的宽度。

   repeat符号定义重复列(或行)的模式。

   auto-fill函数告诉网格在不溢出容器的情况下排列尽可能多的列(或行)。 (这可以创建与 flex 布局的 flex-wrap: wrap 类似的行为。)

   minmax()函数为每列(或行)设置最小和最大大小范围。在上面的代码中，每列的宽度最小为容器的 100 像素，最大为可用的可用空间。

   fr unit表示网格容器中可用空间的一部分。它相当于 flexbox 的 flex-grow 属性。

5. 与 grid-column和 grid-row我们通过定义网格线为这个特定的网格元素设置网格区域。

---

浏览器对 CSS 网格的支持

• Chrome - 自 2017 年 3 月 8 日起全面支持(第 57 版)
• Firefox - 自 2017 年 3 月 6 日起全面支持(第 52 版)
• Safari - 截至 2017 年 3 月 26 日的全面支持(版本 10.1)
• Edge - 截至 2017 年 10 月 16 日的全面支持(第 16 版)
• IE11 - 不支持当前规范；支持过时版本

这是完整的图片:http://caniuse.com/#search=grid

---

Firefox 中炫酷的网格覆盖功能

在 Firefox 开发工具中，当您检查网格容器时，CSS 声明中有一个微小的网格图标。单击它会在页面上显示网格的轮廓。

此处有更多详细信息:https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts