CSS两端对齐

Posted 2025-10-08 by backup@lfo.cc; tagged with none

Flexbox 布局原理

1. 外层容器设置

<form style="display: flex; justify-content: space-between;">

display: flex：将表单设为 Flex 容器
justify-content: space-between：关键属性，让子元素在主轴（水平方向）上均匀分布，第一个元素靠左，最后一个元素靠右

2. 内部两个 DIV 的作用

<!-- 左侧：搜索区域 -->
<div style="display: flex; gap: 8px;">...</div>

<!-- 右侧：操作按钮区域 -->
<div style="display: flex; gap: 8px;">...</div>

两个 DIV 都是 Flex 容器的直接子元素
space-between 会自动将第一个 DIV 推到最左边，第二个 DIV 推到最右边

3. 可视化演示

[ 左侧搜索区域 ] [ 右侧操作按钮 ]
┌─────────────────────────────┐ ┌─────────────────┐
│ IP输入框 MAC输入框 查找 重置 │ │ 添加按钮 应用按钮 │
└─────────────────────────────┘ └─────────────────┘
←───────────── 自动留白空间 ─────────────→

4. 响应式效果

大屏幕：左右两侧自然分开，中间自动填充空白
小屏幕：当空间不足时，flex-wrap: wrap 会让右侧 DIV 换行到下一行

5. 替代方案对比

方案1：使用 margin（传统方式）

.right-buttons {
    margin-left: auto; /* 将右侧按钮推到最右边 */
}

方案2：使用 Grid 布局

form {
    display: grid;
    grid-template-columns: 1fr auto; /* 左侧自适应，右侧固定宽度 */
}

方案3：使用 Float（过时）

.left-section { float: left; }
.right-section { float: right; }

6. 当前方案的优点

简洁：只需要一个 justify-content: space-between
自适应：自动适应不同屏幕宽度
易维护：不需要计算具体间距值
现代标准：Flexbox 是现代 CSS 布局的首选方案
这种布局方式在网页设计中非常常见，特别适合工具栏、导航栏等需要左右对齐的场景。