Question

我最近开始尝试使用flexbox，但仍然无法绕过某些东西。

我正在尝试使用三个flex项（子项）创建一个简单的布局。容器设置为flex-direction: column，所有弹性项目都水平和垂直居中。

我希望其中一个弹性项目位于左上角。 基本上就像我将position: absolute与top: 30px; left: 30px;一起使用。

我知道align-self用于覆盖每个弹性项目的样式，但我无法使其工作。

Answer 1

您可以使用pseudo元素和flex＆amp; 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>

Answer 2

您可以使用auto margins和不可见的弹性项目将弹性项目放置在角落中，同时使兄弟弹性项目居中。

HTML （添加一个弹性项目）

<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）不同，则真正的居中将关闭，绝对定位可能是更好的解决方案。

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

Methods for Aligning Flex Items

在角落中定位一个中心弯曲项目

2 个答案: