CODEWITHSUNDEEP
cssflexbox
Luca Nate Mahler
Luca Nate Mahler

Reputation: 1332

CSS Flexbox - Same column width at colspan

I have two containers with 2 and 3 boxes insinde. The space between the boxes is fix.

Here is the JSFiddle: http://jsfiddle.net/e9dnxm3w/

HTML

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>
<div class="container">
    <div></div>
    <div class="two"></div>
</div>

CSS

div.container {
    display: flex;

    margin-bottom: 10px;
}

div.container > div {
    flex: 1;
    margin-left: 10px;
    padding-bottom: 50%;

    background-color: blue;
}

div.container > div:first-child {
    margin-left: 0;
}

div.container > div.two {
    flex: 2;
}

My problem is that i want the column to have exactly the same width (resp. the spaces at the same position). How can I tell the Flexbox it should ignore the margin-left or calculate it?

Upvotes: 3

Views: 2600

Answers (1)

user652649
user652649

Reputation:

so, flex-basis doesn't include margins (but includes padding)

therefore, for getting your grid displaying correctly, you need to manually add the "missing 10px margin" to the flex-basis value:

div.one
{
    /* ... */
    margin-left:10px;
    flex-basis:100px;
}

div.two
{
    /* ... */
    flex-basis:calc(200px + 10px); /* add the margin of the missing box */
}

div.three
{
    /* ... */
    flex-basis:calc(300px + 20px); /* add the margin of the two missing boxes */
}

DEMO: http://jsfiddle.net/tndgvkfq/

Upvotes: 5

Related Questions