Flexbox wrap - 最后一行的不同对齐方式

Question

我正在使用柔性盒将两个物品对齐到容器的左侧和右侧，同时垂直居中对齐它们。 这是我想要实现的一个非常简单的例子。

HTML：

<div class="container">
    <div class="first"></div>
    <div class="second"></div>
</div>

CSS：

.container {
    width:100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
}

这是示例的jsfiddle 。

如果屏幕宽度足以适合一行的内部div，则效果非常好。 然而，当屏幕尺寸较小（例如移动电话）并且div包裹在第二线上时，第二线也变为与左侧对齐（即， flex-start ）。 如何强制第二个div始终与右边框对齐，无论它是在第一行还是包裹在第二行？

编辑：在示例中，我为两个子元素分配了固定宽度 - 这只是为了简单起见。 在现实生活中，所有宽度都是根据在运行时从数据库中读取的内容动态变化的。 因此，任何基于固定大小的解决方案都不起作用。

Answer 1

您可以尝试添加一些左边距以将.second元素推向右侧：

.second {
    margin-left: auto;
}

 .container { width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; } .first { background-color: yellow; width: 200px; height: 100px; } .second { background-color: blue; width: 200px; height: 100px; margin-left: auto; } 

 <div class="container"> <div class="first"></div> <div class="second"></div> </div> 

或者，同样地，证明右边的所有元素，但是将.first元素推到左边：

.container {
    justify-content: flex-end;
}
.first {
    margin-right: auto;
}

 .container { width:100%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; } .first { background-color: yellow; width: 200px; height: 100px; margin-right: auto; } .second { background-color: blue; width: 200px; height: 100px; } 

 <div class="container"> <div class="first"></div> <div class="second"></div> </div> 

Answer 2

我发现了一个解决方案，但它本质上是“hacky”（ 请参阅此处的演示 ，稍后解释），因为它要求您明确知道父容器的宽度，这将触发基于@media的布局更改。

你的代码无法正常工作的原因是因为对align-self工作原理感到困惑。 在flexbox模型中，“对齐”指的是沿着交叉轴的对齐（即，在“行”布局方向的传统意义上，将指代垂直对齐），而“对齐”指的是沿着主轴的对齐（即行）。 为了更好地解释我的观点，我特此附上Chris Coyier在他的flexbox指南中制作的图像：

因此， align-self: flex-start装置告诉.first对齐到所述容器的顶部，和align-self: flex-end的含义是告诉.second对齐到所述容器的底部。 在这种情况下，由于您尚未为父级声明显式高度，因此父级将采用其最高子级的高度。 由于这两种.first和.second是100像素高，父也将有100像素所计算的高度，因此使在对准无差异（因为二者具有与开始和十字轴的末端齐平）。

hack会将flex-direction切换为row，具有以下限制： 您知道容器的宽度，或子容器的显式宽度。 在这种情况下，断点将在400像素，在那里.first和.second将彼此相交。

.container {
    width:100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    height: 100px;
}

.first {
    background-color: yellow;
    width: 200px;
    height: 100px;
    align-self: flex-start;
}

.second {
    background-color: blue;
    width: 200px;
    height: 100px;
    align-self: flex-end;
}

@media screen and (max-width: 400px) {
    .container {
        height: 200px;
    }
}

然后，这里是一个概念验证小提琴，从你原来的改进： http ： //jsfiddle.net/teddyrised/cncozfem/2/