Flex布局实现三元素布局：居中两个，右对齐一个
本文将演示如何利用Flexbox布局，实现三个元素的特殊排列：前两个元素水平居中，第三个元素右对齐。
初始HTML结构：
元素一元素二元素三
仅设置display: flex是不够的，我们需要借助Flexbox属性来精细控制元素排列。
解决方案：使用justify-content: space-between
justify-content属性控制Flex容器内项目在主轴上的对齐方式。space-between属性将项目在容器内两端对齐，并使项目间距相等。 这巧妙地实现了前两个元素居中，第三个元素右对齐的效果。
完整的CSS代码：
.container {
width: 200px;
height: 20px;
background-color: lightpink; /* 更改背景颜色以便区分 */
display: flex;
justify-content: space-between;
}
.container div {
width: 50px;
background-color: lightblue; /* 更改背景颜色以便区分 */
height: 20px;
text-align: center;
}
width和height属性定义容器和子元素尺寸；background-color用于视觉区分；text-align: center确保子元素文本居中显示。
最终HTML结构（添加类名）：
元素一元素二元素三
通过将CSS样式应用于container类，即可轻松实现预期布局效果。此方法简洁高效，充分展现了Flexbox布局的强大功能。
