Css flexbox将图像与div的末尾对齐

我有一个头球的头球。如何将图像与div右侧对齐

---

我已经尝试了

调整内容：flex-end

和

对齐项目：flex-end

在我看来，您有两个选项

从.right类中删除flex:2并添加margin left:auto

在.right类中添加display:flex，align items:flex end；flex-direction:column（您还有需要在类包装器中作为.right类的直接子类移动的文本）

---

我更喜欢选项1。

Sten给出的好答案的另一个选项是使用绝对位置。例如：

.right{
  position:absolute;
  right:0;
}

---

对于给定的代码示例，要右对齐其父级中的图像，

align items:flex end

是一个flex容器属性，在

right

规则中没有任何效果

弹性项目的适当属性应为

align self

，但由于方向为

行

，这仍然不起作用，因为

align-*

属性会影响横轴（垂直方向）

一个简单的解决方案是从

right

规则中删除

align items:flex-end

，而是将

div容器——right

作为flex容器，使用

justify content:flex-end

将其子对象图像推到右侧。这将与其余规则一起工作，并保留原始布局

堆栈片段

.main容器{
背景色：白色；
弹性：1；
显示器：flex；
弯曲方向：行；
}
.左{
弹性：2；
背景色：白色；
}
.对{
弹性：2；
/*对齐项目：柔性端；已删除*/
}
.分区货柜{
背景色：#90C3D4；
高度：100px；
}
.div容器--左{
边框左下半径：10px；
左侧填充：10px；
左边距：10px；
}
.div容器--右{
边框右下半径：10px；
右边填充：10px；
右边距：10px；
显示：flex；/*已添加*/
调整内容：柔性端；/*已更改*/
对齐项目：添加flex start；/*以避免图像拉伸*/
}

上图右对齐

或LGson提供的所有选项：）