顯示flex，將div對准其容器的右下角

Question

我需要在其紅色容器“內容”的右下角顯示黃色的div“圖標”。

我的腳本有什么問題？

 .root { display: inline-flex; background-color: red; } .content { display: flex; align-items: centerl; justify-content: centerl; height: 80px; width: 100%; background-color: red; } .icon { position: absolute; right: 0; bottom:0; background-color: yellow; } 

 <div class="root"> <div class="content"> content </div> <div class="icon"> icon </div> </div> 

Answer 1

您可以使用flex end屬性align-self: flex-end;來代替位置， align-self: flex-end;

參見下面的代碼片段：

 .root { display: inline-flex; background-color: red; } .content { display: flex; align-items: center; justify-content: center; height: 80px; width: 100%; background-color: red; } .icon { align-self: flex-end; background-color: yellow; } 

 <div class="root"> <div class="content"> content </div> <div class="icon"> icon </div> </div> 

Answer 2

 .root { display: inline-flex; background-color: red; position: relative; } .content { display: flex; align-items: centerl; justify-content: centerl; height: 80px; width: 100%; background-color: red; } .icon { position: absolute; right: 0; bottom:0; background-color: yellow; } 

 <div class="root"> <div class="content"> content </div> <div class="icon"> icon </div> </div> 

添加.root元素

position: relative;

Answer 3

在HTML結構，你提出的.icon元素不是里面 .container元素。 因此它不能與此相關。 如果更改結構並給.container元素指定position: relative ，則它將起作用。

 .root { display: inline-flex; background-color: red; } .content { display: flex; align-items: centerl; justify-content: centerl; height: 80px; width: 100%; background-color: red; position: relative; } .icon { position: absolute; right: 0; bottom:0; background-color: yellow; } 

 <div class="root"> <div class="content"> content <div class="icon"> icon </div> </div> </div>