弹性盒子布局中项目对齐方式调整
弹性盒子布局提供了一些属性，可以轻松调整项目在容器内的对齐方式。
1. 水平对齐（justify-content）
- justify-content: flex-start; 将项目对齐到容器起始位置。
- justify-content: flex-end; 将项目对齐到容器结束位置。
- justify-content: center; 将项目对齐到容器中心。
- justify-content: space-between; 将项目均匀分布在容器内，两侧间距相等。
- justify-content: space-around; 将项目均匀分布在容器内，项目之间的间距相等。
- justify-content: space-evenly; 将项目均匀分布在容器内，项目之间的间距相等，并且两侧间距也相等。
2. 垂直对齐（align-items）
- align-items: flex-start; 将项目沿着交叉轴对齐到容器起始位置。
- align-items: flex-end; 将项目沿着交叉轴对齐到容器结束位置。
- align-items: center; 将项目沿着交叉轴对齐到容器中心。
- align-items: stretch; 将项目拉伸，以填充整个容器的高度（仅适用于单行 flex 布局）。
问题解答
1. 文字不在 div 中的问题
您的 head 元素中设置了固定的高度，导致文本高度被拉伸到了该高度。您可以删除 height: 50px; 属性，以允许文本高度由其内容决定。
2. 调整最后两个 div 右对齐的问题
您可以使用以下 CSS 代码调整最后两个 div 的右对齐：
.box {
justify-content: flex-end;
}
.box_item:last-child {
margin-left: auto;
} 
