0

假设我们有这个简单的 CSS flexbox 布局：

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    }

.flex-item:nth-child(1) {
    order: 0;
    }

.flex-item:nth-child(2) {
    order: 1;
    align-self: flex-start;
    }

.flex-item:nth-child(3) {
    order: 1;
    align-self: flex-end;
    }

.flex-item {
    width: 50px;
    height: 50px;
    background:red;
}
<div class="flex-container">
   <div class="flex-item"></div>
   <div class="flex-item"></div>
   <div class="flex-item"></div>
</div>

问题说明：

不幸的是flex-item，2 和 3 并不位于彼此下方的右边缘，尽管它们都设置为order: 1。

问题：

如何安排flex-item 2在右上边缘，而flex-item 3位于右下边缘（项目 1 应保持垂直居中在左边缘）？

我还没有弄清楚如何将所有三个项目排列成一排，但后两个项目在这一行中彼此下方。

4

2 回答 2

1

我猜你正在尝试这样做。

* {
  padding: 0;
  margin: 0;
}
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}
.flex-container-col {
    display: flex;
    flex-direction:column;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
}

.flex-item:nth-child(1) {
    order: 0;
    align-self: flex-center;
    }

.box {
    width: 50px;
    height: 50px;
    background:red;
}
<div class="flex-container">
  <div class="flex-item box"></div>
  <div class="flex-item flex-container-col">
    <div class="box"></div>
    <div class="box"></div>
  </div>
</div>

如果你想把 item 2 和 3 top 的右边缘放在一起，你可以删除 flex-container-col 中的 justify-content ，这样它们就会在顶部合并。希望有效。

于 2021-06-26T04:24:27.040 回答
1

如果您希望一个块在右上角，一个在中心，另一个在右下角，那么您可以使用此代码段。flex item 1应该在，应该在flex-start并且应该在它所在的地方。flex item 3flex endflex item 2

* {
  padding: 0;
  margin: 0;
}
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100vh;
    }

.flex-item:nth-child(1) {
    order: 0;
    align-self: flex-start;
    }

.flex-item:nth-child(2) {
    order: 1;
    }

.flex-item:nth-child(3) {
    order: 1;
    align-self: flex-end;
    }

.flex-item {
    width: 50px;
    height: 50px;
    background:red;
}
<div class="flex-container">
   <div class="flex-item"></div>
   <div class="flex-item"></div>
   <div class="flex-item"></div>
</div>

于 2021-06-26T01:41:30.703 回答