本文将介绍如何使用 CSS Flexbox 布局，实现将两个元素分别放置在容器的左右两端。通过设置 `justify-content` 属性为 `space-between`，可以轻松实现这一常见的布局需求，无需额外的类或复杂的定位技巧。
Flexbox 是一种强大的 CSS 布局模式，它提供了一种简单而有效的方式来控制元素在容器中的排列和对齐。在许多情况下，我们需要将元素放置在容器的两端，例如，将导航栏中的 logo 放在左侧，而将搜索框或用户头像放在右侧。Flexbox 的 justify-content 属性可以轻松实现这一目标。
实现方法
实现左右对齐布局的关键在于设置 Flex 容器的 justify-content 属性为 space-between。该属性会将项目均匀分布在容器中，第一个项目位于起始行，最后一个项目位于终止行。这意味着第一个元素会被推到左侧，而第二个元素会被推到右侧，从而实现左右对齐的效果。
示例代码
以下是一个简单的 HTML 结构，包含一个 Flex 容器和两个子元素：
YDUI Touch专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高；使用 Flexbox 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局；用 rem 实现强大的屏幕适配布局，等比例适配所有屏幕；自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI。
@@##@@@@##@@
为了实现左右对齐，我们需要添加以下 CSS 样式：
.flex-container {
display: flex;
align-items: center; /* 垂直居中，可选 */
justify-content: space-between; /* 关键属性：左右对齐 */
}代码解释
- display: flex;：将容器设置为 Flex 容器。
- align-items: center;：可选属性，用于将项目在垂直方向上居中对齐。
- justify-content: space-between;：关键属性，将项目均匀分布在容器中，并将第一个项目放置在起始行，最后一个项目放置在终止行，从而实现左右对齐。
注意事项
- 确保父元素具有足够的宽度来容纳两个子元素，否则元素可能会重叠。
- align-items 属性是可选的，用于控制项目在交叉轴（垂直方向）上的对齐方式。
- 如果需要调整元素之间的间距，可以使用 margin 属性。
总结
使用 Flexbox 的 justify-content: space-between 属性，可以轻松实现将元素放置在容器左右两端的布局。这种方法简单、灵活且易于维护，是实现常见布局需求的理想选择。希望本文能够帮助你更好地理解和应用 Flexbox 布局。
