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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

我找到了一个解决方案，但它更像是＆＃34; hacky＆＃34;在本质上（see demo here，稍后说明），在某种意义上它要求您明确知道父容器的宽度，这将触发基于@media的布局更改。

您的代码无法正常工作的原因是因为align-self的工作方式存在混淆。在flexbox模型中，＆＃34;对齐＆＃34; “横向对齐”是指沿着横轴的对齐（即，在＆＃34;行＆＃34;布局方向的传统意义上，将指向垂直对齐），而＆＃34;对齐＆＃34; “主轴”是指沿主轴（即行）的对齐。为了更好地解释我的观点，我特此附上Chris Coyier在flexbox guide：

中制作的图像

align-self description

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

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

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

2 个答案: