How to align 2 columns in flexbox layout, one centered of parent and one left of parent

Question

Im new to flexbox. so probably a rookie question.

What i'm trying to achieve is the following: 2 columns with unknown width / height aligned one column left of the parent and one column centered.

Answer 1

It depends on your situation but a little workaround might help by adding a third invisible element.

Example HTML:

<div class="parent">
    <div class="left"></div>
    <div class="center"></div>
    <div class="right"></div>
</div>

Example CSS:

.parent {
    display: flex;
    justify-content: space-between;
 }
.left {
    width: 100px;
    height: 60px;
    background: red;
}
.center {
    width: 50px;
    height: 70px;
    background: blue;
}
.right {
    width: 70px;
    height: 100px;
    background: yellow;
    visibility: hidden;
}

Fiddle: https://jsfiddle.net/eqcndn3m

As an alternative to flex you can use 3 floating elements with equal width and keep the last one empty:

<div class="parent">
    <div class="column align-left">
        <div class="left"></div>
    </div>
    <div class="column">
        <div class="center"></div>
    </div>
    <div class="column"></div>
</div>

.parent {
    text-align: center;
}
.column {
    float: left;
    width: 33.33%;
}
.align-left {
    text-align: left;
}
.left {
    display: inline-block;
    width: 100px;
    height: 60px;
    background: red;
}
.center {
    display: inline-block;
    width: 50px;
    height: 70px;
    background: blue;
}

Updated Fiddle: https://jsfiddle.net/eqcndn3m/1