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：

＆＃13;

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

＆＃13;

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

＆＃13;

右边对齐一个元素INSIDE FLEXBOX DIV？

1 个答案: