css - 容器内行内 block 的中心网格

Question

我在容器中有一组内联 block div。我希望此 div 形成一个适当的“类似表格”的网格，元素向左对齐，因此如果网格的最后一行包含的元素少于其他行，则网格不会被破坏。

此外，网格本身需要相对于容器居中。

这是我需要的说明:http://note.io/157hjk1

显而易见的方法是将网格放在包装器内，为包装器设置 text-align: left 并将包装器本身置于父容器中。

但在这种情况下，包装器的宽度将不适合单行中元素的长度总和，而是适合容器的宽度。

通常的解决方案 - 为包装器设置 display:inline-block 在这种情况下不起作用，可能是因为包装器中的内联 block 。

HTML

<div class="container">
    <div class="wrap">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
        <div class="square">4</div>
        <div class="square">5</div>
        <div class="square">6</div>
        <div class="square">7</div>
    </div>
</div>

CSS

.square {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 2px;
    display: inline-block;
}

.wrap{
     border: 1px solid green;
}

.container{
    width: 250px;
    border: 1px solid blue;
    padding: 5px;
}

JSFiddle 和我的代码在这里可用 - http://jsfiddle.net/prepin/gzB5k/

Answer 1

如果您知道一行中的最大方 block 数，则可以在最近的浏览器(2013/2014)中完成。

使用 flex 布局并添加 max_squares_in_a_row - 1 不可见的“方 block ”来填充最后一行的空白位置。

我更新了原始片段:

.square {
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 2px;
    display: inline-block;
}
.square.empty {
    /* make "placeholders" invisible */
    height: 0;
    /* padding: 0; */
    /* border: 0; */
    margin-top: 0;
    margin-bottom: 0;
}

.wrap{
    border: 1px solid green;
     
    /* use flex layout here: */
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
}

.container{
    width: 250px;
    border: 1px solid blue;
    padding: 5px;
}

<div class="container">
    <div class="wrap">
        <div class="square">1</div>
        <div class="square">2</div>
        <div class="square">3</div>
        <div class="square">4</div>
        <div class="square">5</div>
        <div class="square">6</div>
        <div class="square">7</div>
        <!-- add (max squares in row - 1) empty placeholders: -->
        <div class="square empty"></div>
        <div class="square empty"></div>
        <div class="square empty"></div>
    </div>
</div>