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 of the example。

如果屏幕足够宽以在一行中容纳两个内部 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”（see demo here，稍后解释），因为它需要您明确知道父容器的宽度，这将触发基于 @ 的布局更改987654325@.

您的代码无法运行的原因是对align-self 的工作方式的混淆。在 flexbox 模型中，“align”是指沿交叉轴对齐（即传统意义上的“行”布局方向，指的是垂直对齐），而“justify”是指沿主轴对齐（即行）。为了更好地解释我的观点，我在此附上 Chris Coyier 从他的flexbox guide 制作的图片：

因此，align-self: flex-start 表示告诉.first 对齐到容器顶部，align-self: flex-end 表示告诉.second 对齐到容器底部。在这种情况下，由于您没有为父级声明显式高度，因此父级将采用其最高子级的高度。由于.first 和.second 都是100px 高，因此父级的计算高度也将是100px，因此在对齐方面没有区别（因为两者都与横轴的起点和终点齐平）。

黑客会将flex-direction 切换到行，但有以下限制：您知道容器的宽度，或其子容器的显式宽度。 在这种情况下，断点将在 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/