Question

我试图显示嵌套的flexbox，以获得类似于Excel中单元格合并的效果。我得到了嵌套的单元格，但我无法正确显示边距：我希望所有边距都可见，而不仅仅是主列之间。在这里小提琴 - ＆gt; 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;
    }

嵌套的flexbox不显示边距

1 个答案: