Clever Geek Handbook

CSS Flexbox - same column width in colspan

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

Here's a 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 (respectively spaces at the same position). How can I tell Flexbox it should ignore the margin on the left, or calculate it?

+3


source to share


1 answer


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

so to display the grid correctly, you need to manually add the "missing 10px margin" to the flex 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/

+5


source






More articles:


All Articles