Question

我有codepen我的标题。如何将图像对齐到div的右侧？

我尝试了justify-content: flex-end和align-items: flex-end

Answer 1

我认为你有两种选择。

从.right类中删除flex：2并添加margin-left：auto;
到.right类添加display：flex，align-items：flex-end; flex-direction：column（您还需要将该文本作为.right类的直接子项在类包装器中移动。

我更喜欢选项1。

Answer 2

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

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

Answer 3

使用给定的代码示例，并且右侧对齐其父级中的图像，selected是一个弹性容器属性，并且不会对random.choice((redtheme, greentheme, bluetheme))()规则产生任何影响。

Flex项目的相应属性为align-items: flex-end，但方向为right，由于align-self属性会影响横轴（垂直方向），因此仍然无效。< / p>

一个简单的解决方案是从row规则中删除align-*，然后将align-items: flex-end设为灵活容器，使用right将其子项（图像）推送到正确的。这将适用于其他规则，并保留原始布局。

Stack snippet

＆＃13;

div-container--right

＆＃13;

justify-content: flex-end

＆＃13;

除了上述内容之外，还有一些对齐flex项目的方法：