Flex的框方向柱

Question

我有方向列Flexbox的想在這個codepen

https://codepen.io/anon/pen/KaBNvN?editors=1100

<div class="container"> 
    <div class="header">header</div> 
    <div class="content"> 

    <div>Item 1</div> 
    <div>Item 2</div> 
    <div>Item 3</div> 
    <div>Item 4</div> 
    <div>Item 5</div> 
    <div>Item 6</div> 
    <div>Item 7</div> 
    <div>Item 8</div> 
    <div>Item 9</div> 
    <div>Item 10</div> 
    </div> 
    <div class="footer">footer</div> 

</div> 


    div { 
    border: 1px solid; 
} 
.container { 
    display: flex; 
    flex-direction: column; 
    height: 300px; 
    width: 200px; 
} 

.container .content { 
    overflow-y: scroll; 
    display: flex; 
    flex-direction: column; 
} 

.footer { 
    height: 20px; 
} 

我想要的頁腳總是在底部。

我嘗試了justify-self：flex-end爲頁腳，但它不起作用。

Answer 1

由於頁腳元素是flexbox容器的直接子元素，因此最簡單的選擇是將元素的margin-top設置爲auto。這將有效地將頁腳元素放置在容器的底部。

Updated Example

.footer { 
    height: 20px; 
    margin-top: auto; 
} 

如果你很好奇，爲什麼這個作品，這裏是關於auto利潤率上Flexbox的項目相關的規範報價：

Flexible Box Layout Module - 8.1. Aligning with auto margins

自動利潤率上彈性項目的效果與塊流中的自動邊距非常相似：

• 的撓曲鹼和靈活的長度的計算期間，自動邊距經由justify-content和align-self視爲0。

• 之前對準，任何陽性的自由空間被分配至該維度自動邊距。

正如你所看到的，剩餘的可用空間分佈在auto保證金的方向。

Answer 2

你已經在那裏，你只需要：

div { 
     border: 1px solid; 
    } 
    .container { 
     display: flex; 
     height: 300px; 
     flex-wrap: wrap; 
     width: 200px; 
    } 

    .header { 
     width: 100%; 
    } 

    .container .content { 
     overflow-y: scroll; 
     flex-direction: column; 
     width: 100%; 
    } 

    .footer { 
     align-self: flex-end; 
     height: 20px; 
     width: 100%; 
    }