CSS Flexbox布局：实现子元素在容器两端对齐

本教程详细讲解如何利用css flexbox实现容器内子元素的两端对齐布局。通过核心属性justify-content: space-between，您可以轻松将第一个子元素对齐到起始端，最后一个子元素对齐到末尾端，同时确保它们之间均匀分布空间，从而创建清晰、专业的布局效果。

理解Flexbox主轴对齐

在CSS Flexbox布局中，主轴对齐（Main Axis Alignment）是控制弹性子元素沿着主轴如何分布和对齐的关键。justify-content属性负责管理这一行为。当我们需要将一个子元素对齐到容器的起始端，而另一个对齐到末尾端时，justify-content: space-between是实现这一目标的高效且标准的方法。

核心解决方案：使用 justify-content: space-between

justify-content: space-between属性的作用是：

• 将第一个弹性子元素放置在主轴的起始位置。
• 将最后一个弹性子元素放置在主轴的末尾位置。
• 剩余的可用空间将均匀地分配到所有子元素之间。

这完美解决了将两个子元素分别推向容器两端的需求。

示例场景：

立即学习“前端免费学习笔记（深入）”；

假设我们有一个标题区域，其中包含一段文本（如日期）和一个图标（如箭头）。我们的目标是让文本显示在左侧，而图标显示在右侧，占据容器的两端。

HTML结构：

<div class="div-title title-mon">
    <p class="tmp-day">Lunedi</p>
    <img width="20px" height="30px" class='arrow arrow-mon' src="arrow.png">
</div>

初始CSS（作为Flex容器的基础设置）：

.div-title {
    display: flex; /* 声明为Flex容器 */
    align-items: center; /* 垂直居中对齐子元素 */
    flex-direction: row; /* 子元素从左到右排列，这是默认值 */
}

在上述CSS中，我们已经将.div-title设置为弹性容器，并确保子元素在交叉轴（垂直方向）上居中对齐，以及在主轴（水平方向）上从左到右排列。现在，我们需要在主轴上实现两端对齐。

移动端UI&微信UI YDUI Touch

YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。

81

查看详情

添加 justify-content: space-between：

为了实现文本和图片分别对齐到容器的两端，只需在父容器的CSS中添加 justify-content: space-between 属性：

.div-title {
    display: flex;
    align-items: center; /* 垂直居中对齐子元素 */
    flex-direction: row; /* 子元素从左到右排列 */
    justify-content: space-between; /* 关键：将子元素推向两端并分配空间 */
}

效果解析：

应用 justify-content: space-between 后，<p class="tmp-day">Lunedi</p> 将被推到.div-title容器的左侧（主轴起始端），而<img ...>元素将被推到右侧（主轴末尾端）。如果容器内还有其他元素，它们将均匀分布在文本和图片之间。

完整示例代码

结合HTML和最终的CSS，我们可以看到完整的实现效果：

HTML:

<div class="div-title">
    <p class="tmp-day">Lunedi</p>
    <img width="20px" height="30px" class="arrow" src="arrow.png" alt="Arrow">
</div>

CSS:

.div-title {
    display: flex;
    align-items: center; /* 确保子元素在垂直方向上居中对齐 */
    flex-direction: row; /* 默认值，但明确指定可读性更好 */
    justify-content: space-between; /* 将第一个子元素推到左端，最后一个推到右端 */
    width: 100%; /* 示例：让容器占据可用宽度 */
    padding: 10px; /* 示例：增加内边距 */
    border: 1px solid #ccc; /* 示例：添加边框以便观察 */
    box-sizing: border-box; /* 示例：确保内边距和边框不增加宽度 */
}

.tmp-day {
    margin: 0; /* 移除默认的段落外边距，避免不必要的空间 */
    font-size: 16px;
    color: #333;
}

.arrow {
    width: 20px;
    height: 30px;
    /* 确保图片路径正确，并考虑提供替代文本 */
}

注意事项

1. 子元素数量： justify-content: space-between 在有两个子元素时表现最佳，能完美实现两端对齐。如果有三个或更多子元素，它会将所有子元素均匀分布，第一个在起始，最后一个在末尾，中间的元素之间有相等的空间。
2. flex-direction 的影响： justify-content 始终沿着主轴工作。如果 flex-direction 设置为 column，那么 space-between 将在垂直方向上将子元素推向容器的顶部和底部。
3. 替代方案：margin: auto： 对于某些特定场景，例如只希望将某个子元素推到一侧，而其他元素保持默认对齐，可以使用 margin-left: auto 或 margin-right: auto。例如，要将第二个子元素推到最右侧，可以给它设置 margin-left: auto。这通常用于非两端对齐且中间有其他元素的场景，或者只需要将一个元素从其他元素中“推开”。
4. justify-items 和 justify-self： Flexbox容器上没有 justify-items 属性来控制子元素在主轴上的对齐，子元素上也没有 justify-self 属性来独立控制其在主轴上的对齐。这是因为主轴上的对齐由容器的 justify-content 统一管理。如果需要单个子元素在主轴上独立对齐，通常需要结合 margin: auto 或嵌套 Flexbox 容器。

总结

通过本教程，我们学习了如何利用CSS Flexbox的 justify-content: space-between 属性，高效地实现容器内子元素的左右两端对齐布局。这是一个在日常网页开发中非常实用的技巧，能够帮助您构建出结构清晰、视觉平衡的用户界面。掌握这一属性，将使您的Flexbox布局能力更上一层楼。

以上就是CSS Flexbox布局：实现子元素在容器两端对齐的详细内容，更多请关注php中文网其它相关文章！