右對齊一個元素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>