弹性盒子布局中项目对齐方式调整
弹性盒子布局提供了一些属性，可以轻松调整项目在容器内的对齐方式。
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;}
登录后复制
以上就是如何使用弹性盒子布局调整项目对齐方式？的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2801115.html
