子节点进入新行后，内联块元素将获得全宽

Question

我认识到，如果子元素多于一行，则内联块元素的宽度为100％：

<div style="background-color:red;padding:5px">
    <div style="display:inline-block;background-color:green;padding:5px">
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
        <div class="cube"></div>
    </div>
</div>
<style>
.cube{ 
    background-color:yellow;
    width:100px;
    height:100px;
    display:inline-block;
}
</style>

https://jsfiddle.net/xhj075fr/5/

我想拥有的是这样的优点：

有没有办法让内联块完成？目标是，在这样的居中div中获得左对齐网格（绿色div的宽度应基于适合一行的立方体数量）：

Answer 1

试试这个：

<div style="background-color:red;width:500px;padding:5px">
<div style="margin:auto;width:82.6%;background-color:green;padding:5px">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>

如果问题没有解决，请回来。！