如何使用CSS解决一行有三个元素，前两个元素靠左排列，第三个元素靠右排列的问题

如图所示，我要把左边的场馆和区域信息靠左排列，价格信息靠右排列。如何使用CSS实现这种效果？

在这里，我使用了flexbox弹性布局，以下是我的实现代码

                .name-info {
                        display: flex;
                        gap: 2px;
                        justify-content: space-between;
                        align-items: center;
                }

                .venue-name {
                        font-weight: 600;
                        font-size: 16px;
                        color: #2c3e50;
                }

                .partition-name {
                        font-size: 13px;
                        color: #5a7a9a;
                        margin-left: 6px;

                }

                .price {
                        font-size: 17px;
                        font-weight: 600;
                        color: #0077cc;
                        margin-left: auto;
                }

其中，name-info是我为这三个元素设置的一个父级class，在父级class中使用display:flex；在price类中使用margin-left:auto;即可实现如上图所示的效果，让价格标签靠左显示。但是由于左边的两个标签中的字体大小不一致，flex之后可能会出现左边的两个标签对不齐的情况，所以我又加上了justify-content: space-between;align-items: center;确保左边的两个标签对齐。

下面再拓展几种实现上面的布局的基本实现方法：

1.Flexbox 弹性布局（推荐方案）

实现原理​：通过 margin-left: auto 占据剩余空间实现右对齐

<div class="container">
  <div class="item">元素1div>
  <div class="item">元素2div>
  <div class="item right">元素3div>
div>
<style>
.container {
  display: flex;  /* 启用弹性布局 
/
*  gap: 10px;      /*
 可选：元素间距 */
}
.right {
  margin-left: auto;  /* 将第三个元素推到右侧 */
}
style>

优势​：代码简洁、支持动态内容、无需计算宽度

---

2.Grid 网格布局

实现原理​：通过 grid-template-columns 定义列宽，结合 justify-self 控制对齐

<div class="container">
  <div class="item">元素1div>
  <div class="item">元素2div>
  <div class="item right">元素3div>
div>
<style>
.container {
  display: grid;
  grid-template-columns: auto auto 1fr; /* 前两列自动宽度，第三列占据剩余空间 */
  gap: 10px;
}
.right {
  justify-self: end;  /* 单元格内右对齐 */
}
style>

适用场景​：需要多列复杂布局时

---

3.浮动布局（传统方法）

实现原理​：前两个元素左浮动，第三个元素右浮动

<div class="container">
  <div class="item left">元素1div>
  <div class="item left">元素2div>
  <div class="item right">元素3div>
  <div style="clear: both;">div> 
div>
<style>
.left {
  float: left;
  margin-right: 10px;
}
.right {
  float: right;
}
style>

注意点​：需手动清除浮动，否则会导致父容器高度塌陷

---

4.绝对定位（特定场景）

实现原理​：第三个元素脱离文档流定位到右侧

<div class="container">
  <div class="item">元素1 元素2div>
  <div class="item right">元素3div>
div>
<style>
.container {
  position: relative;  /* 定位参考基准 */
}
.right {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);  /* 垂直居中 */
}
style>

适用场景​：需要精确控制位置时，但会破坏响应式布局

---

建议

1. 优先选择 Flexbox​：现代浏览器支持率 98% 以上，代码简洁且维护性强

2. 响应式适配​：通过 @media 查询调整间距和对齐方式

3. 垂直居中优化​：添加 align-items: center 到容器实现垂直居中

4. 兼容性处理​：对老旧项目可添加 -webkit- 前缀（如 display: -webkit-flex）

通过上述方案，开发者可根据项目需求和浏览器兼容性要求选择最合适的实现方式。Flexbox 因其灵活性和易用性，已成为现代 Web 开发的首选布局方案。