如何在flexbox布局中对齐2列，一列在父级中心，另一列在父级左侧

Question

我是flexbox的新手。所以可能是一个菜鸟问题。

我想要实现的目标如下： 2个未知宽度/高度的列对齐父级左侧的一列，居中一列。

Answer 1

这取决于您的情况，但是通过添加第三个不可见元素，可能会有一些解决方法。

示例HTML：

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

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;
}

小提琴：https://jsfiddle.net/eqcndn3m

作为flex的替代方法，您可以使用3个宽度相等的浮动元素，并将最后一个保持为空：

<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;
}

更新小提琴：https://jsfiddle.net/eqcndn3m/1