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

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

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

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

以上就是如何使用弹性盒子布局调整项目对齐方式？的详细内容，更多请关注慧达安全导航其它相关文章！