Flexbox + gouttières (v1)

by ydelmas

HTML

<div class="flex-container">
    <div class="a"><div>A</div></div>
    <div class="b"><div>B</div></div>
    <div class="c"><div>C</div></div>
</div>
<div class="flex-container">
    <div class="a"><div>A</div></div>
    <div class="a"><div>A</div></div>
    <div class="c"><div>C</div></div>
    <div class="c"><div>C</div></div>
</div>

CSS

.flex-container {
    background-color: #3333CC;
    display: -webkit-flex;
    display: flex;
}
.flex-container > * { margin: 0; outline: solid red; }
.flex-container > * > * {
    background-color: #33CC33;
    margin: 10px;
}
.a, .c { flex: 1; }
.b { flex: 2; }