Flex 布局实战：登陆界面布局最常用的 13 个方法总结

先看总体效果图：

1. 开启 flex

.container {
    display: flex;
}

作用：

• 让父元素变成 flex 容器
• 只影响直接子元素

2. 主轴方向

横向排列

.container {
    display: flex;
    flex-direction: row;
}

默认就是 row

效果：

主轴：水平

交叉轴：垂直

纵向排列

.container {
    display: flex;
    flex-direction: column;
}

效果：

主轴：垂直

交叉轴：水平

3. 主轴对齐：justify-content

控制主轴方向上的排列

左对齐 / 顶部对齐：

justify-content: flex-start;

居中：

justify-content: center;

右对齐 / 底部对齐：

justify-content: flex-end;

两端分开：

justify-content: space-between;

均匀留白：

justify-content: space-around;

平均分布：

justify-content: space-evenly;

4. 交叉轴对齐：align-items

控制交叉轴方向上的排列

起点对齐(同主轴)：

align-items: flex-start;

居中对齐(同主轴)：

align-items: center;

终点对齐(同主轴)：

align-items: flex-end;

拉伸(元素若是没有设置高度，会占满父容器的高度；设置了高度，伸展至本身高度)：

align-items: stretch;

默认值是这个。

5. 单个元素自己对齐：align-self

如果只想改单个元素，不想影响所有子元素：

.item {
    align-self: center;
}

常见值：

align-self: flex-start;
align-self: center;
align-self: flex-end;

效果：

仅适用于交叉轴，主轴依靠margin: auto

6. flex 里想让主轴某个元素去最右边，给它 margin-left: auto

在 flex 中：

单个元素主轴到末尾：margin-left: auto

所有元素整体到主轴末尾：justify-content: flex-end

没有像 align-self 那样专门控制 flex 子项主轴对齐的属性

7. 子元素高度写 100% 时，先想想 padding 会不会把它撑爆

默认盒模型是：

box-sizing: content-box;

这时：

height: 100%;
padding-top: 20px;
padding-bottom: 20px;

实际总高度不是 100%，而是：

100% + padding-top + padding-bottom

效果：

最稳的解决办法:

box-sizing: border-box;

这样 width 和 height 会包含 padding 和 border。

效果：

结论:

只要你开始认真布局，几乎都可以先加一句：

* {
    box-sizing: border-box;
}

这是很稳的习惯。

8. 多用块级元素，少和行内元素较劲

行内元素

默认特点：

• 不独占一行
• 不好直接控制宽高
• 更适合小段文字

比如：

<span></span>
<label></label>

块级元素

默认特点：

• 独占一行
• 容易控制宽度、高度、margin、padding
• 更适合布局

比如：

<div></div>
<p></p>
<h2></h2>

9. 背景图布局套路

铺满且不变形

background-size: cover;
background-repeat: no-repeat;
background-position: center center;

意思是：

• 铺满容器
• 不变形
• 可能裁切

完整显示但可能留白

background-size: contain;
background-repeat: no-repeat;
background-position: center center;

想“裁出图片某一块”怎么做

公式：

background-size: cover;
background-position: x y;

10. 背景图和内容分层最稳套路

<div class="bg-img"></div>
<div class="page">
    <div class="login-container glass"></div>
</div>
<style>
.bg-img {
    position: fixed;
    inset: 0;
    background-image: url('img/flower.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center bottom;
    z-index: -1;
}
</style>

好处:

• 背景和内容分开
• 背景位置更好调
• 内容布局不受影响

11. 毛玻璃公式

.glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

重点:

毛玻璃要看到后面的背景，才会明显。

12. 分割线套路

中间有字的分割线

<div class="divider">
    <span>or</span>
</div>
<style>
.divider {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 12px;
    margin: 16px 0;
}

.divider::before,
.divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.2);
}

.divider span {
    padding: 0 10px;
}
</style>

原理:

整行 = 左线 + 文字 + 右线
左右两条线用伪元素自动填满剩余空间。

13. transform: translate(...px,...px) 微调

行内插入<a></a>标签时，会出现和文本上下不对齐的情况，此时可以使用translate微调

 <div style="display: flex;gap: 3px;font-size: 12px;margin-top: 5px;">
      <input type="checkbox" id="remember" name="remember">
      <label style="transform: translateY(+1px);" for="remember"> Remember me</label>
      <a style="margin-left: auto; transform: translateY(+1px); color: rgb(94, 217, 245);" href="#">Forgot Password?</a>
  </div>