Question

当我尝试将一个元素放在左上角而一个放在中间时，顶部元素不会一直向左移动。我该如何做到这一点？

＆＃13;

.Aligner {
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
}

.Aligner-item {
  max-width: 50%;
  background-color: green;
}

.Aligner-item--top {
  align-self: flex-start;
}

＆＃13;

<div class="Aligner">
    <div class="Aligner-item Aligner-item--top">…</div>
    <div class="Aligner-item">…</div>
    <div class="Aligner-item Aligner-item--bottom">…</div>
</div>

＆＃13;

http://codepen.io/anon/pen/EVjzzo

Answer 1

来自MDN：

flex-start

Flex项的交叉开始边距边缘用线的交叉开始边缘刷新。

这意味着align-self: flex-start;会将top框的上边缘与flex框的上边缘（横轴的开头）对齐。

左/右值沿主轴。您可以在W3C规范中详细了解它：https://drafts.csswg.org/css-align/#align-self-property

实现所需布局的一种方法是使用position属性。

请注意，添加position会改变弹性行为;它是一种＆＃34;覆盖＆＃34;物业，如果你愿意的话。绝对定位框上的align-self沿着包含块的块轴（在本例中为y-axis）应用。

您可以在此处查看有关绝对定位的灵活项目的更多信息：http://www.w3.org/TR/css3-flexbox/#abspos-items

＆＃13;

.Aligner {
  background-color: blue;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 200px;
  position: relative; /* new */
}

.Aligner-item {
  max-width: 50%;
  background-color: green;
}

.Aligner-item--top {
  align-self: flex-start;
  left: 0; /* new */
  top: 0; /* new */
  position: absolute; /* new */
}

＆＃13;

<div class="Aligner">
  <div class="Aligner-item Aligner-item--top">…</div>
  <div class="Aligner-item">…</div>
  <div class="Aligner-item Aligner-item--bottom">…</div>
</div>

＆＃13;

使用flexbox将一个元素与页面左上角和左上角对齐

1 个答案: