嵌套的 flexbox 不显示边距

Question

我正在尝试显示嵌套的弹性框，以获得类似于 Excel 中的单元格合并的效果。我让嵌套单元格显示，但我无法正确显示边距：我希望所有边距都可见，而不仅仅是在主列之间。在这里摆弄 --> http://jsfiddle.net/bedhvee4/1/

<div class="flex-container">
    <div class="flex-item" style="-ms-flex: 4; flex: 4;">
        <div class="flex-container">
            <div class="flex-item" style="flex: 0 0 100%">Column A</div>
            <div class="flex-item">11</div>
            <div class="flex-item">12</div>
            <div class="flex-item">13</div>
            <div class="flex-item">14</div>
        </div>
        <div class="flex-container">
            <div class="flex-item">21</div>
            <div class="flex-item">22</div>
            <div class="flex-item">23</div>
            <div class="flex-item">24</div>
        </div>
    </div>
    <div class="flex-item" style="-ms-flex: 3; flex: 3;">
        <div class="flex-container">
            <div class="flex-item" style="flex: 0 0 100%">Column B</div>
            <div class="flex-item">16</div>
            <div class="flex-item">17</div>
            <div class="flex-item">18</div>
        </div>
        <div class="flex-container">
            <div class="flex-item">26</div>
            <div class="flex-item">27</div>
            <div class="flex-item">28</div>
        </div>
    </div>
</div>

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

    .flex-item {
        background: tomato;
        margin: 2px;
        color: white;
        font-weight: bold;
        font-size: 2.5vw;
        text-align: center;
        flex: 1 0 0px;
        white-space: nowrap;
        overflow: hidden;
    }

Answer 1

我并不是 100% 确定您在寻找什么，但我确实更改了一些颜色以及您嵌套 div 的顺序和边距似乎工作正常。这是jsfiddle

http://jsfiddle.net/bedhvee4/6/

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

    .flex-item {
        padding: 10px;
        margin: 5px;
        background: blue;
        color: white;
        font-weight: bold;
        font-size: 2.5vw;
        text-align: center;
        flex: 1 0 0px;
        white-space: nowrap;
        overflow: hidden;
        border: 1px solid white;
    }