将弯曲的物品放置在角落中，同时放置其中的一个
我最近已经开始试用flexbox，但仍然无法将我的头围绕在一些事情上。
我正在尝试创建一个包含三个弹性项目（儿童）的简单布局。 该容器设置为flex-direction: column ，所有flex项目都水平和垂直居中。
我希望其中一个弹性项目位于左上角。 基本上像我使用的position: absolute top: 30px; left: 30px; top: 30px; left: 30px; 。
我知道align-self用于覆盖每个Flex项目的样式，但我无法使其工作。
这是小提琴
您可以使用pseudo元素和flex和order规则：http://jsfiddle.net/49eghxna/2/
.flex-container {
max-width:80%;
margin: 100px auto;
height:600px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #1E5655
}
.flex-container:before, .flex-container:after {
content:'';
flex:1;/* will use and share all space avalaible if no values set to others */
}
.flex-container:before {
order:2
}
.flex-container:after {
order:5
}
.flex-item {
width:300px;
height:50px;
background-color:#fff;
}
.flex-item:nth-of-type(2) {
background-color: #eee;
order:3;
}
.flex-item:nth-of-type(3) {
background-color: #FFD454;
order:4
}
.flex-item:nth-of-type(1) {
align-self: flex-start;
order:0;
}<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
</div> 您可以将一个弹性物品放置在一个角落，同时将同级弹性物品居中，包含auto边距和不可见的弹性物品。
HTML （添加一个Flex项目）
<div class="flex-container">
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div>
<div class="flex-item"></div><!-- invisible flex item for balance -->
</div>
CSS （相关部分）
.flex-item:nth-of-type(1) { margin-bottom: auto; margin-right: auto; }
.flex-item:nth-of-type(2) { }
.flex-item:nth-of-type(3) { }
.flex-item:nth-of-type(4) { margin-top: auto; visibility: hidden; }
DEMO
注意：如果所有弹性物品的高度相同，则此定心和定位解决方案将起作用。 如果柔性物品的高度（或宽度，当flex-direction是row ）变化时，则真正的居中将关闭，绝对定位可能是更好的解决方案。
对于绝对定位方法以及其他居中和定位选项，请参阅此答案：