右对齐元素 在弹性框 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>