Flexbox 速查表

容器属性

.container {
    display: flex;                    /* 或 inline-flex */

    /* 主轴方向 */
    flex-direction: row;              /* row | row-reverse | column | column-reverse */

    /* 换行 */
    flex-wrap: nowrap;                /* nowrap | wrap | wrap-reverse */

    /* 简写 */
    flex-flow: row wrap;

    /* 主轴对齐 */
    justify-content: flex-start;      /* flex-start | center | flex-end | space-between | space-around | space-evenly */

    /* 交叉轴对齐 */
    align-items: stretch;             /* stretch | flex-start | center | flex-end | baseline */

    /* 多行对齐 */
    align-content: stretch;           /* stretch | flex-start | center | flex-end | space-between | space-around */

    /* 间距 */
    gap: 20px;                        /* row-gap column-gap */
}

子项属性

.item {
    /* 排序（默认 0，越小越前） */
    order: 0;

    /* 放大比例 */
    flex-grow: 0;                     /* 默认不放大 */

    /* 缩小比例 */
    flex-shrink: 1;                   /* 默认缩小 */

    /* 初始尺寸 */
    flex-basis: auto;                 /* 可用 px / % / auto */

    /* 简写（推荐） */
    flex: 1;                          /* flex-grow:1; flex-shrink:1; flex-basis:0% */
    flex: 1 0 200px;                  /* 不缩小，初始 200px */

    /* 单独对齐 */
    align-self: auto;                 /* auto | flex-start | center | flex-end | baseline | stretch */
}

对齐速查

justify-content (主轴)
flex-start  ████________
center      __████______
flex-end    ______████__
space-between ██__██__██
space-around _██__██__██_
space-evenly _██__██__██_

align-items (交叉轴)
stretch     ████████████  (填满)
flex-start  ████________  (顶部)
center      ____████____  (居中)
flex-end    ________████  (底部)
baseline    (文字基线对齐)

常见布局

/* 水平居中 */
.parent { display: flex; justify-content: center; }

/* 垂直居中 */
.parent { display: flex; align-items: center; height: 100vh; }

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

/* 两端对齐 */
.parent { display: flex; justify-content: space-between; }

/* 等分三列 */
.parent { display: flex; }
.child { flex: 1; }

/* 固定侧边栏 + 弹性主体 */
.sidebar { flex: 0 0 250px; }  /* 不伸缩，固定 250px */
.main { flex: 1; }

/* 圣杯布局 */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

/* 响应式网格 */
.parent { display: flex; flex-wrap: wrap; gap: 20px; }
.child { flex: 1 1 300px; }  /* 最小 300px，自动换行 */

/* 导航栏 */
nav { display: flex; align-items: center; gap: 20px; }
nav .logo { margin-right: auto; }  /* 推到最左 */