Flex布局完整属性查询手册

一、Flex 基础概念

核心： 设置 display: flex 的元素称为 Flex容器（父容器），容器内直接子元素自动成为 Flex项目（子项）

主轴：flex-direction 定义的排列方向（默认水平从左到右）
交叉轴：垂直于主轴的方向

二、Flex 容器属性（父元素使用）

属性名	作用说明	常用取值
display	开启弹性布局	flex / inline-flex
flex-direction	设置主轴方向（子项排列方向）	row / row-reverse / column / column-reverse
flex-wrap	子项超出容器时是否换行	nowrap / wrap / wrap-reverse
flex-flow	复合简写：flex-direction + flex-wrap	row wrap
justify-content	主轴方向对齐方式	flex-start / flex-end / center / space-between / space-around / space-evenly
align-items	单行子项在交叉轴对齐方式	stretch / flex-start / flex-end / center / baseline
align-content	多行子项整体在交叉轴对齐（仅换行后生效）	stretch / flex-start / flex-end / center / space-between / space-around
gap / row-gap / column-gap	设置子项之间间距（行列间隙）	20px / 1rem

容器属性细分详解

1. display

display: flex：块级弹性容器，独占一行
display: inline-flex：行内弹性容器，与同行元素并排

2. flex-direction 主轴方向

row：默认，水平从左向右
row-reverse：水平从右向左
column：垂直从上到下
column-reverse：垂直从下到上

3. flex-wrap 换行控制

nowrap：默认，不换行，子项自动压缩宽度
wrap：空间不足自动换行
wrap-reverse：换行且颠倒多行顺序

4. flex-flow（简写）

语法：flex-flow: 方向换行;

flex-flow: column wrap;

5. justify-content 主轴对齐

flex-start：默认，靠左/靠上对齐
flex-end：靠右/靠下对齐
center：主轴居中
space-between：两端贴边，中间均分空白
space-around：每个子项两侧留白相等
space-evenly：所有间隙完全相等

6. align-items 单行交叉轴对齐

stretch：默认，子项拉伸填满容器高度
flex-start：交叉轴起点对齐
flex-end：交叉轴终点对齐
center：交叉轴居中
baseline：按文字基线对齐

7. align-content 多行整体对齐（必须wrap换行）

多行内容整体在交叉轴分配空白，取值同justify-content

8. gap 子项间距

column-gap：主轴子项间距
row-gap：交叉轴行间距
gap: 行间距列间距; 简写

三、Flex 项目属性（子元素使用）

属性名	作用说明	取值规则
flex-grow	剩余空间分配扩张比例	数字，默认0（不扩张）
flex-shrink	空间不足时压缩比例	数字，默认1（允许压缩）
flex-basis	子项基准尺寸（主轴初始大小）	auto / px / % / rem
flex	三合一简写：grow shrink basis	1 / auto / none
align-self	单独修改当前子项交叉轴对齐，覆盖align-items	auto / stretch / center / flex-start / flex-end
order	控制子项排列顺序，数字越小越靠前	整数，默认0

子项属性细分详解

1. flex-grow 扩张系数

容器有剩余空白时，按所有子项grow总和分配空间；0=不占多余空间

2. flex-shrink 压缩系数

容器宽度不够时，按shrink比例压缩；0=禁止压缩

3. flex-basis 基准尺寸

主轴方向初始尺寸，优先级高于width/height；auto默认取元素自身宽高

4. flex 简写（高频）

flex: 1 → flex:1 1 0%; 均分剩余空间
flex: none → flex:0 0 auto; 固定尺寸，不扩不缩
flex: auto → flex:1 1 auto; 自适应扩张压缩

5. align-self 单独对齐

单个子项自定义交叉轴位置，优先级高于父容器align-items

6. order 排序

order:-1 排最前；order:10 排最后；同数字保持原顺序

四、完整可运行 Flex 演示示例（全属性分行+逐行注释）

/* ========== Flex容器（父盒子）全部属性 ========== */
.flex-box {
    display: flex;            /* 开启弹性布局，块级容器 */
    flex-direction: row;      /* 主轴水平从左到右排列 */
    flex-wrap: wrap;          /* 空间不足自动换行 */
    /* flex-flow: row wrap; 简写等价上面两行 */
    justify-content: space-evenly; /* 主轴所有间隙完全相等 */
    align-items: center;        /* 单行子项交叉轴居中 */
    align-content: center;       /* 多行整体在交叉轴居中（换行后生效） */
    gap: 15px 20px;           /* 行间距15px，列间距20px；分开写row-gap/column-gap也可 */
    width: 800px;
    height: 450px;
    border: 2px solid #2256a8;
    padding: 20px;
}

/* ========== Flex项目（子盒子）全部属性演示 ========== */
.flex-item {
    flex-grow: 1;              /* 剩余空间均分，扩张比例1 */
    flex-shrink: 1;            /* 空间不足允许压缩 */
    flex-basis: 120px;         /* 主轴初始基准宽度120px */
    /* flex:1 1 120px; 三合一简写上面三行 */
    width: 100px;
    height: 100px;
    background: #4080ff;
    color: #fff;
    display: grid;
    place-items: center;
    border-radius: 6px;
    font-size: 22px;
}

/* 单独修改单个子项：order排序 + align-self单独对齐 */
.item-special {
    order: -1;              /* 排序值-1，跑到所有子项最前面 */
    align-self: flex-end;      /* 单独设置交叉轴底部对齐，覆盖父容器align-items:center */
    flex-grow: 2;              /* 扩张比例为2，占双倍剩余空间 */
    background: #ff6b6b;
}
        

配套HTML结构（分行清晰）

<div class="flex-box">
    <div class="flex-item">1</div>
    <div class="flex-item item-special">特殊</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
</div>
        

页面实时演示效果

1

特殊

3

4

5

6

五、高频Flex实用简写速查

水平垂直居中万能：父容器 display:flex; justify-content:center; align-items:center;
子项均分宽度：子项 flex:1;
子项固定大小不压缩：子项 flex:none;
左右两栏布局：左固定宽 flex:none; 右自适应 flex:1;
垂直弹性列表：父容器 flex-flow:column;

Flex 弹性布局完整属性查询手册

一、Flex 基础概念

二、Flex 容器属性（父元素使用）

容器属性细分详解

1. display

2. flex-direction 主轴方向

3. flex-wrap 换行控制

4. flex-flow（简写）

5. justify-content 主轴对齐

6. align-items 单行交叉轴对齐

7. align-content 多行整体对齐（必须wrap换行）

8. gap 子项间距

三、Flex 项目属性（子元素使用）

子项属性细分详解

1. flex-grow 扩张系数

2. flex-shrink 压缩系数

3. flex-basis 基准尺寸

4. flex 简写（高频）

5. align-self 单独对齐

6. order 排序

四、完整可运行 Flex 演示示例（全属性分行+逐行注释）

配套HTML结构（分行清晰）

页面实时演示效果

五、高频Flex实用简写速查