右对齐一个元素INSIDE FLEXBOX DIV？

Question

如果我们有HTML

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

的这种结构与上海社会科学院的风格为结构：

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