html - 右对齐 FLEXBOX DIV 中的元素？

Question

如果我们有这样的 HTML 结构

<div id="main">
  <div id="sub-1"><div>
  <div id="sub-3"><div>
  <div id="sub-3"><div>
</div>

该结构的 SASS 样式为:

#main
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  align-content: center
  width: 1200px

#sub-1, #sub-2, #sub-3
  width: 100px
  height: 100px

使用该结构，我们将得到一列 3 个完全居中对齐的正方形。
但是，如果我们想将#sub-1 向左移动，将#sub-3 向右移动怎么办？有办法吗？

非常感谢!

Answer 1

您可以使用属性 align-self像这样:

#main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  align-content: center;
}
#sub-1, #sub-2, #sub-3 {
  background:red;
  width: 50px;
  height: 50px
}
#sub-1 {
  align-self:flex-start;
}
#sub-3 {
  align-self:flex-end;
}

<div id="main">
  <div id="sub-1"></div>
  <div id="sub-2"></div>
  <div id="sub-3"></div>
</div>