Flexbox的對齊自被忽略

的文檔align-self狀態：Flexbox的對齊自被忽略

的對齊自CSS屬性來使當前的彎折線覆蓋對齊項值的柔性物品。

但是，這種情況不會發生：

.example { 
 
    display: flex; 
 
    align-items: center; 
 
    border: 1px solid blue; 
 
    height: 8ex; 
 
} 
 

 
.example > div { 
 
    border: 1px solid red; 
 
} 
 

 
#a > div:last-child { 
 
    align-self: top; 
 
} 
 

 
#b > div:last-child { 
 
    align-self: center; 
 
} 
 

 
#c > div:last-child { 
 
    align-self: bottom; 
 
}

<body> 
 
<div id="a" class="example"><div>1</div><div>2</div></div> 
 
<div id="b" class="example"><div>1</div><div>2</div></div> 
 
<div id="c" class="example"><div>1</div><div>2</div></div> 
 
</body>

該文檔也說：

如果任何項目的十字軸保證金設置爲auto ，那麼align-self被忽略。該屬性不適用於塊級別框或表格單元格。

然而，沒有這些東西的工作：

明確添加margin:0孩子div秒。
將display:inline添加到孩子div s。
將div s更改爲span s。

爲什麼align-self無法正常工作？

來源

2017-06-06 Jason C

[meta標記：功能請求]：能夠將downvote你自己的問題。 –

top和bottom對於align-self無效。使用flex-start和flex-end代替：

.example { 
 
    display: flex; 
 
    align-items: center; 
 
    border: 1px solid blue; 
 
    height: 8ex; 
 
} 
 

 
.example > div { 
 
    border: 1px solid red; 
 
} 
 

 
#a > div:last-child { 
 
    align-self: flex-start; 
 
} 
 

 
#b > div:last-child { 
 
    align-self: center; 
 
} 
 

 
#c > div:last-child { 
 
    align-self: flex-end; 
 
}

<body> 
 
<div id="a" class="example"><div>1</div><div>2</div></div> 
 
<div id="b" class="example"><div>1</div><div>2</div></div> 
 
<div id="c" class="example"><div>1</div><div>2</div></div> 
 
</body>

來源

2017-06-06 18:06:18

啊，謝謝。我想我對'align-items'過分關注，並且我沒有注意到這些選項是無效的。現在我想要降低自己的問題。太好了，謝謝！ –

Flexbox的對齊自被忽略

回答

相關問題