Question

我创建了一个具有左右两边的flex容器。左侧包含一个用于保存某些文本的div，而右侧则包含一些文本以及应为图标的

。

但是，我要用flex-end向前推，我想在末端使用它，但是我需要将它作为专栏的flex，同时仍将图标推到div的最右边。

由于某种原因，它被向下推并没有对齐中心，同时仍未在该文本下方的右侧对齐“图标”或右小图像。

.container {
  display: flex;
  width: 30%;
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container .right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <p>More Text</p>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

这就是我要完成的事情。

Answer 1

您只需要在两个规则中切换值即可。

代替此：

.right {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

尝试一下：

.right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* right-align the image */
  justify-content: center;     /* vertically center all content */
}

还要删除容器上的width: 30%约束。

.container {
  display: flex;
  /* width: 30%; */
}

.container .left {
  display: flex;
  align-items: center;
  flex: 1;
}

.container .left img {
  border-radius: 50%;
  margin-right: 10px;
}

.container     .right {
      display: flex;
      flex-direction: column;
      align-items: flex-end;       /* right-align the image */
      justify-content: center;     /* vertically center all content */
    }

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/150">
    <div class="left-text">
      <p>Text Text</p>
      <p>Text Text</p>
    </div>
  </div>
  <div class="right">
    <p>More Text</p>
    <img src="https://via.placeholder.com/20">
  </div>
</div>

在此处了解有关挠性横轴对齐的更多信息：

How does flex-wrap work with align-self, align-items and align-content?

在弯曲方向列中右对齐

1 个答案: