将元素与弯曲方向对齐

Question

是否可以将单个元素与flex容器方向对齐？例如我有一个容器，除了第一个应该左对齐的元素外，所有元素都应该右对齐。

与float相比，使用"flex"是否可能实现？在以下示例中；如何将第一个元素(在红色div中(上对齐，并将第一个元件(在绿色div中(左对齐？

.h-left {
align-self: flex-start;
}
.h-center {
align-self: center;
}
.h-right {
align-self: flex-end;
}
.v-top {
justify-self: flex-start;
}
.v-center {
justify-self: center;
}
.v-bottom {
justify-self: flex-end;
}
.container {
display: flex;
flex-direction: column;
}
.container.h-left {
align-items: flex-start;
}
.container.h-center {
align-items: center;
}
.container.h-right {
align-items: flex-end;
}
.container.v-top {
justify-content: flex-start;
}
.container.v-center {
justify-content: center;
}
.container.v-bottom {
justify-content: flex-end;
}

.h-container {
flex-direction: row;
}
.h-container.h-left {
justify-content: flex-start;
}
.h-container.h-center {
justify-content: center;
}
.h-container.h-right {
justify-content: flex-end;
}
.h-container.v-top {
align-items: flex-start;
}
.h-container.v-center {
align-items: center;
}
.h-container.v-bottom {
align-items: flex-end;
}

.container > * {
max-width: 150px;
}

<h4>The first element should be top aligned</h4>
<div class="container h-right v-bottom" style="background-color: red; height: 300px;">
<p class="h-top">This should be top aligned</p>
<p>This should be bottom aligned</p>
<p>This should be bottom aligned</p>
</div>
<h4>The first element should be left aligned</h4>
<div class="container h-container h-right v-bottom" style="background-color: green; height: 150px;">
<p class="h-left">This should be left aligned</p>
<p>This should be right aligned</p>
<p>This should be right aligned</p>
</div>

Answer 1

是：使用margin-xxx: auto，其中xxx代表左/右/下/上，无论您希望间隙在哪里。我将其应用于您的示例-请参阅以下内容：

.h-left {
align-self: flex-start;
}
.h-center {
align-self: center;
}
.h-right {
align-self: flex-end;
}
.v-top {
justify-self: flex-start;
}
.v-center {
justify-self: center;
}
.v-bottom {
justify-self: flex-end;
}
.container {
display: flex;
flex-direction: column;
}
.container.h-left {
align-items: flex-start;
}
.container.h-center {
align-items: center;
}
.container.h-right {
align-items: flex-end;
}
.container.v-top {
justify-content: flex-start;
}
.container.v-center {
justify-content: center;
}
.container.v-bottom {
justify-content: flex-end;
}

.h-container {
flex-direction: row;
}
.h-container.h-left {
justify-content: flex-start;
}
.h-container.h-center {
justify-content: center;
}
.h-container.h-right {
justify-content: flex-end;
}
.h-container.v-top {
align-items: flex-start;
}
.h-container.v-center {
align-items: center;
}
.h-container.v-bottom {
align-items: flex-end;
}

.container > * {
max-width: 150px;
}
.h-top {
margin-bottom: auto;
}
.h-left {
margin-right: auto;
}

<h4>The first element should be top aligned</h4>
<div class="container h-right v-bottom" style="background-color: red; height: 300px;">
<p class="h-top">This should be top aligned</p>
<p>This should be bottom aligned</p>
<p>This should be bottom aligned</p>
</div>
<h4>The first element should be left aligned</h4>
<div class="container h-container h-right v-bottom" style="background-color: green; height: 150px;">
<p class="h-left">This should be left aligned</p>
<p>This should be right aligned</p>
<p>This should be right aligned</p>
</div>