CSS “网格” 布局与现代CSS（无JS）

Question

通缉

我想有一个网格布局。 有点像Pinterest，除了项目有固定的高度（所以它应该容易得多）。

它应该是响应。 colums的数量应根据视口大小设置。

该DOM应该是一个容器内儿童的简单列表。我不想为每一行包装元素。我想是这样的：

<div class="container"> 
    <div class="item">a</div> 
    <div class="item">b</div> 
    <div class="item">c</div> 
    <div class="item">d</div> 
    <div class="item">e</div> 
    <div class="item">f</div> 
    <div class="item">g</div> 
    <div class="item">h</div> 
    <div class="item">i</div> 
</div> 

项目的顺序事，所以DOM的“B”项应在“一”项目的右侧（而不是下）。

MY未遂

我已经做了this layout使用Flexbox的，但因为我有计算一些利润率与数学感觉相当哈克。另外我不明白如何控制我的Flexbox行之间的垂直空间，因为它似乎随着容器高度而增长。

这里是Codepen上面我LESS混入：

.flexboxGridMixin(@columnNumber,@spacingPercent) { 
    @contentPercent: 100% - @spacingPercent; 
    @sideMargin: @spacingPercent/(@columnNumber*2); 
    display: flex; 
    flex-direction: row; 
    flex-wrap: wrap; 
    justify-content: flex-start; 
    > * { 
    box-sizing: border-box; 
    width: (100% - @spacingPercent)/@columnNumber; 
    margin-left: @sideMargin; 
    margin-right: @sideMargin; 
    } 
} 

这好像做数学一样，不知怎的，战胜Flexbox的最初目的没有？

预期的答案

因此，有人可以解释我如何解决我的Flexbox的布局？或者告诉我什么是解决布局问题的最好，最优雅和最现代的方法？

我不想用花车，可能不是inline-block的，也不像Packery /砌体JS基础的解决方案

请使用现代CSS在你的答案，因为我已经知道如何用简单的解决这个问题旧的CSS/JS。我针对现代浏览器只（待定）

---

解决方案

这里是我final result，对于那些有兴趣重用此布局。

也是一个非常不错的视觉Flexbox的教程在这里：https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties

Answer 1

我已经做了使用Flexbox的这种布局，但因为我有计算一些利润率与数学感觉相当哈克。

是的，我认为你使用的代码多于必要条件，而没有充分利用多个flexbox功能。柔性属性可以简单高效地实现您想要的布局。

HTML（在codepen去除不必要的外部容器）

<ul> 
    <li>a</li> 
    <li>b</li> 
    <li>c</li> 
    <li>d</li> 
    <li>e</li> 
    <li>f</li> 
    <li>g</li> 
    <li>h</li> 
    <li>i</li> 
    <li>j</li> 
    <li>k</li> 
</ul> 

CSS（我编译你的CSS的人谁不使用预处理程序的人）

html, body { height: 100%; } 

ul { 
    display: flex; 
    flex-wrap: wrap; 
    height: 100%; 
    list-style: none; 
    padding: 0; 
    align-content: flex-start; /* solves vertical margin problem (see note below) */ 
} 

li { 
    flex: 0 1 200px; /* don't grow, shrink proportionally, start at 200px width */ 
    background: pink; 
    height: 100px; 
    line-height: 100px; /* for demo only: center text vertically */ 
    text-align: center; /* for demo only: center text horizontally */ 
    box-sizing: border-box; 
    margin: 15px; 
} 

DEMO：http://jsfiddle.net/mk8uksb2/

注意：在原始代码中，行之间的空间是con相对于视口高度进行牵引或展开，因为创建柔性盒时默认规则为align-content: stretch。这意味着布局将扩大以填充容器的大小。在修改后的代码中，我重写了缺省值align-content: flex-start，它在容器的开始处打包行。

您试图满足您的网格的几个要求。我认为，修改后的代码涵盖了所有这些：

• 我想有一个网格布局。
• ...项目有固定的高度。
• 它应该是有响应的。
• colums的数量应根据视口大小设置。
• DOM应该是一个容器内简单的childs列表。
• 我不希望每行的包装元素。
• 项目的排序很重要，所以DOM的“b”项目应该在“a”项目的右侧。