## 前言

Flexbox 是现代 CSS 布局的核心,本文记录一些常用的布局模式。

## 居中布局

```css
.center {
display: flex;
justify-content: center;
align-items: center;
}
```

## 等分布局

```css
.equal-grid {
display: flex;
gap: 16px;
}
.equal-grid > * { flex: 1; }
```

## sticky footer

```css
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content { flex: 1; }
```

Last modification:June 19, 2026
如果觉得我的文章对你有用,请随意赞赏