如何使用弹性盒子布局调整项目对齐方式？

文章不知道大家是否熟悉？今天我将给大家介绍《如何使用弹性盒子布局调整项目对齐方式？ 》，这篇文章主要会讲到等等知识点，如果你在看完本篇文章后，有更好的建议或者发现哪里有问题，希望大家都能积极评论指出，谢谢！希望我们能一起加油进步！

弹性盒子布局中项目对齐方式调整

弹性盒子布局提供了一些属性，可以轻松调整项目在容器内的对齐方式。

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;
}

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《如何使用弹性盒子布局调整项目对齐方式？ 》文章吧，也可关注golang学习网公众号了解相关技术文章。