在顶部中心和底部中心对齐柔性孩子，柔性箱

Question

我需要使用柔性箱布局，其中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/

Answer 1

你在找什么是justify-content: space-between;对准的项目，直到角落。 加入到.container，你去了。

​​

在.item-4你有align-self: flex-start;但你并不需要这一点。只是删除它。

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

为了更好地帮助您了解Flexbox的，有一个非常好的css-tricks article。

Answer 2

你的意思是这样？ https://jsfiddle.net/da4jdff7/1/

.container{ 
display: flex; 
min-height: 50vh; 
align-items: center; 
flex-direction: column; 
} 

.item-5 { 
margin-top: auto 
}