Html 将弹性物品居中放置，同时将其中一件放在角落

最近我开始尝试使用flexbox，但仍然无法对某些事情进行思考

我试图创建一个包含三个flex项（子项）的简单布局。容器设置为

flex-direction:column

，所有flex项水平和垂直居中

我想在左上角放置一个flex项目。 基本上就像我使用

位置：绝对
和
顶部：30px；左：30px

我知道
align self
用于覆盖每个flex项目的样式，但我无法让它工作

您可以使用
伪
元素和
弹性
和
顺序
规则：


.flex容器{
最大宽度：80%；
保证金：100像素自动；
高度：600px；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
对齐项目：居中；
背景色：#1E5655
}
.flex容器：之前.flex容器：之后{
内容：''；
flex:1；/*将使用并共享所有可用空间（如果未将值设置为其他值）*/
}
.flex容器：之前{
订单：2
}
.flex容器：之后{
订单：5
}
.弹性项目{
宽度：300px；
高度：50px；
背景色：#fff；
}
.flex项目：第n个类型（2）{
背景色：#eee；
顺序：3；
}
.flex项目：第n个类型（3）{
背景色：#FFD454；
订单：4
}
.flex项目：第n个类型（1）{
自我校准：灵活启动；
顺序：0；
}
您可以将一个柔性项目放置在角落中，同时将兄弟柔性项目与一个不可见的柔性项目居中

HTML（添加一个弹性项）


注：当所有柔性项目高度相等时，此定心和定位解决方案将起作用。如果柔性项目的高度（或宽度，当
柔性方向
为
行
时）不同，则将禁用真正的居中，绝对定位可能是更好的解决方案

有关绝对定位方法以及其他定心和定位选项，请参见以下答案：



非常聪明，非常感谢。我也发现了这一点，虽然它是用户行而不是列来表示方向，但这是页面上的第二个示例（）@madebym好吧，您询问了flex；），请注意，显示表在IE8中工作，用于此站点上您认为有用的答案。没有义务。这只是推广高质量内容的一种方式。
<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>

.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; }