Question

我正在使用Express把手循环一堆对象，我需要将它们放在网格中。但是我不知道什么时候开新行，所以我不认为我可以使用桌子。

我基本上想要一个灵活数量的行项目，每个项目的最小宽度。我理解flexbox可以帮助我实现这一目标。我已经查找了一些关于使用它的教程，但我似乎无法找到一个帮助我实现我需要的东西。

这是我到目前为止所拥有的：

<div class="Grid">
    {{#each projects}}
        <div class="Grid-cell project">
            <img class="projectMainImage" src="/mi/{{this.mainImage}}" />
        </div>
    {{/each}}
</div>

和CSS：

.Grid {
    display: flex;
    flex-flow: row wrap;
    align-content: flex-start;
}
.Grid-cell {
    flex: 1;
    flex-grow: 1;
}
*, *:before, *:after {
    box-sizing: border-box;
}

Answer 1

您可以在.Grid-cell元素上添加最小宽度。

如果没有最小宽度，最宽的元素应该给出该单元格的最小宽度（此处为图像）。

要让元素变得足够宽以适合其内容，请使用速记flex：flex: 1 1 auto;或flex: 1 0 auto;

下面的演示

.Grid {
  display: flex;
  flex-flow: row wrap;
  align-content: flex-start;
}

.Grid-cell {
  flex: 1 1 auto;
  min-width: 10vw;
  line-height: 10vw;
  border: solid;
  margin: 1em;
  text-align: center;
}

img {
  vertical-align: middle;
  /*eventually*/
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

<div class="Grid">
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/250/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
        <div class="Grid-cell project">
            <img class="projectMainImage" src="http://lorempixel.com/150/100" />
        </div>
</div>

使用flexbox在网格中定位未知数量的元素，每个元素的最小宽度

1 个答案: