CODEWITHSUNDEEP
cssmarginflexbox
Moto
Moto

Reputation: 1141

nested flexbox not showing margin

I'm trying to display nested flexboxes in order to get an effect similar to cell merging in Excel. I got the nested cells to show up, but I can't get the margins displaying correctly: I want to have all the margins visible, not just between the main columns. Fiddle here --> 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;
    }

Upvotes: 0

Views: 247

Answers (1)

Enjayy
Enjayy

Reputation: 1074

I am not really 100% sure what you are looking for but I did change a few colors and the order in which you have the divs nested and the margins seem to be working properly. Here is the 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;
    }

Upvotes: 1

Related Questions