css 3个元素行排列，前2个元素靠左，第三个元素靠右

**CSS 行排列案例**

在 CSS 中，我们可以使用 flexbox 或 grid 布局来实现多个元素的行排列。以下是使用 flexbox 的一个简单案例。

### 案例描述我们有三个元素：左侧元素（`left-element`）、中间元素（`middle-element`）和右侧元素（`right-element`）。要求左侧元素靠左，中间元素居中，右侧元素靠右。

### HTML 结构

html<div class="container">
 <div class="left-element">左侧元素</div>
 <div class="middle-element">中间元素</div>
 <div class="right-element">右侧元素</div>
</div>

### CSS 样式

css.container {
 /* flexbox 容器 */
 display: flex;
 justify-content: space-between; /* 左侧元素靠左，右侧元素靠右 */
}

.left-element {
 /* 左侧元素样式 */
 background-color: #f0ad4e;
 width:30%;
 height:100px;
 margin-right:10px;
}

.middle-element {
 /* 中间元素样式 */
 background-color: #4CAF50;
 width:40%;
 height:100px;
 margin:010px;
}

.right-element {
 /* 右侧元素样式 */
 background-color: #2196F3;
 width:30%;
 height:100px;
}

### 解释在上面的 CSS 样式中，我们使用 `display: flex` 来创建一个 flexbox 容器。然后，使用 `justify-content: space-between` 来实现左侧元素靠左，右侧元素靠右的效果。

对于每个元素，我们分别设置了背景颜色、宽度和高度，以及左右边距。

### 总结在这个案例中，我们使用 CSS flexbox 布局来实现三个元素的行排列。通过设置容器的 `justify-content` 属性，我们可以轻松地控制元素的排列方式。

**注意**

* 在实际应用中，需要根据具体需求调整样式和布局。
* 这个案例仅供参考，可能需要根据具体场景进行调整。

### 相关代码以下是使用 grid 布局实现相同效果的示例：

css.container {
 /* grid 容器 */
 display: grid;
 grid-template-columns:30%40%30%;
 gap:10px;
}

.left-element {
 /* 左侧元素样式 */
 background-color: #f0ad4e;
 height:100px;
}

.middle-element {
 /* 中间元素样式 */
 background-color: #4CAF50;
 height:100px;
}

.right-element {
 /* 右侧元素样式 */
 background-color: #2196F3;
 height:100px;
}

在这个示例中，我们使用 `grid-template-columns` 来定义列的宽度和数量。然后，使用 `gap` 属性来设置列之间的间距。

**注意**

* 使用 grid 布局需要根据具体需求调整样式和布局。
* 这个案例仅供参考，可能需要根据具体场景进行调整。