將元素對齊到每個flexbox的中心底部

我有3個使用display：flex並排顯示的div。將元素對齊到每個flexbox的中心底部

這些div的內容是不同的高度，但我想要的是在每個總是位於底部的鏈接中創建鏈接。

----------- ----------- ----------- 
| img | | img | | img | 
| heading 1 | | heading 3 | | heading 3 | 
| paragraph | | paragraph | | paragraph | 
| paragraph | |   | | paragraph | 
|   | |   | | paragraph | 
| link | | link | | link | 
----------- ----------- -----------

這樣鏈接將始終顯示爲排隊。

JSFiddle code

來源

2016-01-01 smally

這裏有兩種方法：

嵌套Flexbox的

.col { 
    flex: 1; 
    display: flex;     /* create nested flex container */ 
    flex-wrap: wrap;    /* enable flex items to wrap */ 
    justify-content: center;  /* center flex items on each line */ 
} 

.col > a { align-self: flex-end; } /* position link always at bottom */

DEMO 1

絕對定位

.col { 
    flex: 1; 
    position: relative;  /* establish containing block (nearest positioned ancestor) 
           for absolute positioning */ 
} 

.col > a { 
    position: absolute; 
    bottom: 5px;     /* adjust this value to move link up or down */ 
    left: 50%;     /* center link horizontally */ 
    transform: translateX(-50%); /* center link horizontally */ 
}

DEMO 2

第三種方法涉及切換flex-direction到column。但是，在某些情況下，更改伸縮方向不是可接受的選項，因爲它會更改佈局的行爲。（此處未詳細說明此方法，因爲它已經發布在另一個答案中。）

來源

2016-01-01 06:48:10

你可以的.content的display改變flex，那麼爲了使從頂部的內容流至底部添加flex-direction: column。爲了孩子錨元素的底部位置，只需添加添加margin-top: auto它：

Updated Example

.content { 
    display: flex; 
    flex-direction: column; 
} 
.content a { 
    margin-top: auto; 
}

來源

2016-01-01 03:46:45

將元素對齊到每個flexbox的中心底部

回答

相關問題