在弯曲方向列中右对齐 [英] Align right in flex direction column

问题描述

我创建了一个具有左右两边的flex容器.左侧包含一个div，其中包含一些文本，而右侧则包含一些文本以及应该是一个图标.

I've created a flex container that has a left and a right. The left contains a div that holds some text, while the right holds some text and what should be an icon.

但是，我将flex-end推到最右边，但我希望它在末端，但我需要将它作为专栏的flex，同时仍将图标推到div的最右边.

However, I am pushing right over with flex-end, I want it on the end, but I need it to be a flex of column while still pushing the icon to the far right of the div.

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

For some reason it's getting pushed down and not aligning center while still not aligning the "icon" or little right image to the right below that text.

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

这就是我要完成的工作.

This is what I am trying to accomplish.

推荐答案

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

You just need to switch the values in two rules.

代替此:

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

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

Learn more about flex cross-axis alignment here:

• flex-wrap如何与align-self，align-items和align-content一起使用?

这篇关于在弯曲方向列中右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！