如何在保持宽度的前提下将h2标题移至屏幕右侧？

嘿，我看了你的代码，问题主要出在flex布局和float的冲突，还有一些属性用错了地方：

• 当容器设置了display: flex之后，里面的子元素就变成了flex item，这时候float属性会被浏览器完全忽略，所以你加的float: right根本不起作用；
• justify-items这个属性在flex布局里是无效的，flex布局里控制水平对齐（当主轴是垂直方向时）的是align-items，或者直接给单个子元素设置align-self。

给你两个简单可行的解决方案：

方案一：用flex的align-self属性定位 #

直接给h2加上align-self: flex-end，配合你要的60%宽度，就能让它乖乖靠在容器右侧：

<div class="container">
 <h1>Example Title</h1>
 <h2>This is a test sentence to work on my html and css code.</h2>
</div>

.container {
  display: flex;
  flex-direction: column;
}

h2 {
  width: 60%;
  align-self: flex-end; /* 让h2在水平方向靠右 */
}

方案二：用margin-left: auto挤到右侧 #

另一种经典的flex布局技巧，给h2设置margin-left: auto，它会自动填充左侧的剩余空间，把元素推到右边：

.container {
  display: flex;
  flex-direction: column;
}

h2 {
  width: 60%;
  margin-left: auto; /* 自动填充左侧空间，实现右对齐 */
}

如果需要h2里的文本也靠右对齐，再给h2加个text-align: right就行，按需调整～

内容的提问来源于stack exchange，提问作者Anonymous