2016-10-17 3 views
0

我需要使用柔性箱佈局,其中2個柔性項目,項目1應該在頂部中心對齊,而項目2應該位於底部中心。我無法弄清楚如何做到這一點。在頂部中心和底部中心對齊柔性孩子,柔性箱

請參見下面的代碼:

.container{ 
 
    padding:10px; 
 
    background: #fff; 
 
    border-radius:5px; 
 
    margin: 45px auto; 
 
    box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1); 
 
} 
 

 
.item{ 
 
    color: #fff; 
 
    padding: 15px; 
 
    margin: 5px; 
 
    background: #3db5da; 
 
    border-radius: 3px; 
 
} 
 

 
.container{ 
 
    display: flex; 
 
    min-height: 50vh; 
 
    justify-content: center; 
 
    align-items: center; 
 
    flex-direction: column; 
 
} 
 
.item{ 
 
    /*margin: auto;*/ 
 
    /*align-self: flex-start;*/ 
 
} 
 

 
.item-4{ 
 
    align-self: flex-start; 
 
}
<div class="container"> 
 
    <div class="item item-4"> 
 
    Flex Item 
 
    <p>Vertical and horizontal align easy!</p> 
 
    </div> 
 
    <div class="item item-5"> bottom-center</div> 
 
</div>

這裏是小提琴鏈接:https://jsfiddle.net/q5cw4xvy/

+0

將'.container'元素的'justify-content'屬性更改爲'space-between'並從第二個子元素中刪除'align-self'屬性。 – Shaggy

+0

您使用了標籤flex,請將其更改爲flexbox以防止混淆 –

回答

1

你在找什麼是justify-content: space-between;對準的項目,直到角落。 加入到.container,你去了。

​​

.item-4你有align-self: flex-start;但你並不需要這一點。只是刪除它。

https://jsfiddle.net/q5cw4xvy/2/

爲了更好地幫助您瞭解Flexbox的,有一個非常好的css-tricks article