如何在另一個使用柔性盒的底部對齊div？

我需要將橙色按鈕對齊在藍色的底部。用我目前的flex代碼，我無法得到想要的結果。任何想法如何解決它？由於如何在另一個使用柔性盒的底部對齊div？

.content { 
 
    width: 350px; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 

 
.row1 { 
 
    background-color: red; 
 
} 
 

 
.row2 { 
 
    background-color: blue; 
 
    height: 100px 
 
} 
 

 
.icon { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="content"> 
 
    <div class="row1"> 
 
    </div> 
 
    <div class="row2"> 
 
    <div class="icon"> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-11 Radex

。圖標不能使用任何flex屬性，因爲它的父級沒有flex屬性 – monkeyinsight

您還需要設置row2display: flex然後你就可以橙色元素上使用align-self: flex-end。

.content { 
 
    width: 350px; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
} 
 
.row1 { 
 
    background-color: red; 
 
} 
 
.row2 { 
 
    background-color: blue; 
 
    display: flex; 
 
    height: 100px 
 
} 
 
.icon { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    align-self: flex-end; 
 
}

<div class="content"> 
 
    <div class="row1"></div> 
 
    
 
    <div class="row2"> 
 
    <div class="icon"></div> 
 
    </div> 
 
</div>

來源

2017-08-11 11:27:44

在這裏，我們「行2」中添加此CSS，

display: flex; 
flex-direction: column;

它意味着，如果任何物體在底部放然後只需父塊以上的CSS和元素，我們需要設置設置爲底部添加CSS「margin-top:auto;」

.content { 
 
    width: 350px; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    
 
} 
 

 
.row1 { 
 
    background-color: red; 
 
} 
 

 
.row2 { 
 
    background-color: blue; 
 
    height: 100px; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.icon { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    align-items: center; 
 
    justify-content: center; 
 
    margin-top: auto; 
 
}

<div class="content"> 
 
    <div class="row1"> 
 
    </div> 
 
    <div class="row2"> 
 
    <div class="icon"> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-11 11:37:29

有很多，可以從你的代碼，如果不需要它可以刪除花式的，請在這裏找到它，我已經改變了.content和.row2花式

.content { 
 
    width: 350px; 
 
    height: 150px; 
 
    background-color: yellow; 
 
    display: flex; 
 
} 
 

 
.row1 { 
 
    background-color: red; 
 
} 
 

 
.row2 { 
 
    background-color: blue; 
 
    height: 100px; 
 
    flex: 1; 
 
    align-self: flex-end; 
 
    display: flex; 
 
    align-items: flex-end; 
 
} 
 

 
.icon { 
 
    width: 50px; 
 
    height: 50px; 
 
    background-color: orange; 
 
    align-items: center; 
 
    justify-content: center; 
 
}

<div class="content"> 
 
    <div class="row1"> 
 
    </div> 
 
    <div class="row2"> 
 
    <div class="icon"> 
 

 
    </div> 
 
    </div> 
 
</div>

來源

2017-08-11 11:44:05

如何在另一個使用柔性盒的底部對齊div？

回答

相關問題