illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 CSS 现代标准 · 核于 2026-06

速查 ​

  • 开启：容器 display: flex / inline-flex；直接子元素自动成弹性项目
  • 轴：主轴由 flex-direction 决定，交叉轴垂直于主轴；「主轴用 justify-*、交叉轴用 align-*」
  • 项目默认 flex: 0 1 auto（不伸、可缩、按内容 / width 起算）；容器默认 row + nowrap + align-items: stretch
  • 四个关键字：flex: initial=0 1 auto、flex: auto=1 1 auto、flex: none=0 0 auto、flex: 1=1 1 0
  • 主轴分布：justify-content —— flex-start（默认）/ center / space-between / space-around / space-evenly
  • 交叉轴对齐：align-items（默认 stretch）整组、align-self 单项、align-content 多行
  • align-content 仅多行有效（flex-wrap: wrap 才生效）；间距统一用 gap
  • 居中：justify-content: center + align-items: center
  • 三大避坑：子项溢出 → min-width: 0；不能压扁 → flex: none；等高失效 → 别设固定 height
  • 无障碍红线：*-reverse / order 只改视觉、不改 DOM，慎用且必测键盘

容器属性速查（写在父元素上） ​

属性取值默认说明
displayflex / inline-flex—开启块级 / 行内弹性容器
flex-directionrow / row-reverse / column / column-reverserow主轴方向
flex-wrapnowrap / wrap / wrap-reversenowrap是否换行
flex-flow<direction> <wrap>row nowrap上两者的简写
justify-contentflex-start / flex-end / center / space-between / space-around / space-evenly / start / endnormal（≈flex-start）主轴上的分布
align-itemsstretch / flex-start / flex-end / center / baselinestretch交叉轴整组对齐
align-contentstretch / flex-start / flex-end / center / space-between / space-around / space-evenlynormal（≈stretch）多行时行间分布（单行无效）
gap<length> / <行> <列>0项目间距（行 + 列简写）
row-gap / column-gap<length>0单独设行 / 列间距
place-content<align-content> <justify-content>—align-content + justify-content 简写

项目属性速查（写在子元素上） ​

属性取值默认说明
flex-grow<number>（≥0）0剩余空间的抢占比例
flex-shrink<number>（≥0）1空间不足时的收缩比例
flex-basisauto / content / <length> / <percentage> / 0auto伸缩前的起始尺寸
flex<grow> <shrink> <basis> / 关键字0 1 auto上三者简写（推荐用它）
align-selfauto / stretch / flex-start / flex-end / center / baselineauto覆盖容器 align-items
order<integer>（可负）0视觉排序（不改 DOM 顺序）

flex 简写展开速查 ​

写法展开为含义
flex: initial0 1 auto默认：不伸、可缩、按内容 / width 起算
flex: auto1 1 auto可伸可缩，从内容尺寸起算（内容多占得多）
flex: none0 0 auto完全锁死，不伸不缩
flex: 11 1 0从 0 起算并等比抢空间（等分列）
flex: <number><number> 1 0单数字 → grow，basis 归 0
flex: <length>1 1 <length>单长度 → basis，grow/shrink 取 1
flex: a ba b 0两数字 → grow / shrink
flex: a 30pxa 1 30px数字 + 长度 → grow / basis

justify-content 三个 space 值对比 ​

| 值 | 两端 | 项目间 | 直观（|=容器边） | | --- | --- | --- | --- | | space-between | 0 | 满 | |■···■···■| | | space-around | 半份 | 整份 | |·■··■··■·| | | space-evenly | 整份 | 整份 | |·■·■·■·| |

实战配方速查 ​

css
/* N 等分列 */
.col { flex: 1; }

/* 固定侧栏 + 自适应主区 */
.aside { flex: 0 0 240px; }
.main  { flex: 1; min-width: 0; }

/* 完美居中 */
.center { display: flex; justify-content: center; align-items: center; }

/* 粘性页脚（整页骨架） */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

/* 响应式卡片墙（自适应列数，无需媒体查询） */
.cards { display: flex; flex-wrap: wrap; gap: 16px; }
.cards > .card { flex: 1 1 240px; }

/* 导航栏：左群 + 右单 */
.nav { display: flex; align-items: center; gap: 20px; }
.nav .login { margin-left: auto; }

/* 媒体对象：左图右文 */
.media { display: flex; gap: 12px; align-items: flex-start; }
.media img  { flex: none; }
.media .body { flex: 1; min-width: 0; }

/* 绝不被压扁的元素 */
.icon { flex: none; } /* = 0 0 auto */

三大避坑速查 ​

现象根因解法
子项里的长文本 / URL 把容器顶破溢出弹性项目默认不缩小于自身 min-content给该项 min-width: 0（纵向 min-height: 0）
图标 / 头像被压扁变形默认 flex-shrink: 1 允许收缩给它 flex: none（0 0 auto）
卡片明明没设高度却不等高项目设了固定 height，覆盖了 stretch去掉固定高度，靠默认 align-items: stretch
align-content 写了没反应容器是单行（nowrap）改 flex-wrap: wrap；单行对齐用 align-items
justify-content 居中无效主轴无剩余空间（项目撑满或 flex-grow 抢光）确认有空隙；或检查主轴方向是否如预期
flex: 1 和 flex: auto 表现不一样前者 basis=0（严格等分），后者 basis=auto（按内容）等分用 flex: 1，按内容用 flex: auto

权威链接 ​

标准 / 规范

课程 / 指南

兼容性 / 调试

相关页 ​