布局

# 定位布局

# position

position: <定位>

• static：静态定位 默认值
• relative：相对定位（相对于静态定位）
• absolute：绝对定位（相对于非静态定位的最近祖先元素）
• fixed：固定定位（相对于浏览器）

# top

top: <上偏移>

• 长度值
• 百分值：相对于父容器高度

# bottom

bottom: <下偏移>

• 长度值
• 百分值：相对于父容器高度

# left

left: <左偏移>

• 长度值
• 百分值：相对于父容器宽度

# right

right: <右偏移>

• 长度值
• 百分值：相对于父容器宽度

# z-index

z-index: <层叠顺序>

• 数值

# 浮动布局

# float

float: <浮动>

• none：不浮动 默认值
• left：左浮动
• right：右浮动

# clear

clear: <清除浮动>

• none：不清除 默认值
• left：清除左浮动
• right：清除右浮动
• both：清除左右浮动

/* 清除浮动以解决父容器高度塌陷 */
.father:after {
    display: block;
    clear: both;
    content: "";
}

# 弹性布局

Flex 布局教程：语法篇 - 阮一峰的网络日志 (ruanyifeng.com)open in new window

# 容器属性

# flex-direction

flex-direction: <主轴方向>

• row：水平 - 文本方向 默认值
• row-reverse：水平 - 文本相反方向
• column：垂直 - 从上向下
• column-reverse：垂直 - 从下向上

# flex-wrap

flex-wrap: <主轴换行>

• nowrap：不换行 默认值
• wrap：第一行在上方 / 第一列在左方
• wrap-reverse：第一行在下方 / 第一列在右方

# flex-flow

flex-flow: <flex-direction> || <flex-wrap>

# justify-content

justify-content: <主轴对齐>

• normal：常规，同 flex-start 默认值
• center：中点对齐
• flex-start：主轴方向的起点对齐
• flex-end：主轴方向的终点对齐
• start：水平主轴时文本方向的起点对齐，垂直主轴时顶边对齐
• end：水平主轴时文本方向的终点对齐，垂直主轴时底边对齐
• left：左边对齐（垂直主轴时顶边对齐）
• right：右边对齐（垂直主轴时顶边对齐）
• space-between：两端对齐，中间均匀间隔
• space-around：中间均匀间隔，两端间隔距离为一半
• space-evenly：完全均匀间隔

# align-items

align-items: <单主轴的交叉轴对齐>

• normal：常规，同 stretch 默认值
• center：中点对齐
• flex-start：水平交叉轴时文本方向的起点对齐，垂直交叉轴时顶边对齐
• flex-end：水平交叉轴时文本方向的终点对齐，垂直交叉轴时底边对齐
• start：同 flex-start
• end：同 flex-end
• self-start：同 flex-start
• self-end：同 flex-end
• baseline：第一行文字基线对齐
• stretch：同 flex-start，交叉轴方向未设对应宽度/高度时，占满整个交叉轴

# align-content

align-content: <多主轴的交叉轴对齐>

• normal：第一根主轴在交叉轴方向的起点对齐，其他主轴完全均匀间隔 默认值
• center：中点对齐
• flex-start：水平交叉轴时文本方向的起点对齐，垂直交叉轴时顶边对齐
• flex-end：水平交叉轴时文本方向的终点对齐，垂直交叉轴时底边对齐
• start：同 flex-start
• end：同 flex-end
• space-between：两端对齐，中间均匀间隔
• space-around：中间均匀间隔，两端间隔距离为一半
• space-evenly：完全均匀间隔
• stretch：同 flex-start，交叉轴方向未设对应宽度/高度时，占满相应比例交叉轴

# 项目属性

# order

order: <项目排列顺序>

• 数值：越小越靠前，0 默认值

# flex-grow

flex-grow: <项目放大比例>

• 数值：0（即有剩余空间也不放大）默认值

# flex-shrink

flex-shrink: <项目缩小比例>

• 数值：1 默认值

# flex-basis

flex-basis: <项目占据主轴大小>

• auto：项目原本大小 默认值
• 长度值

# flex

flex: <flex-grow> <flex-shrink> <flex-basis>

• auto：= 1 1 auto
• none：= 0 0 auto

# align-self

align-self: <项目交叉轴对齐>：项目交叉轴对齐（取值同 align-items）

• auto：继承容器的 align-items 默认值
• normal：常规，效果同 stretch
• center：中点对齐
• flex-start：交叉轴方向的起点对齐
• flex-end：交叉轴方向的终点对齐
• start：文本方向的起点对齐（垂直交叉轴时顶边对齐）
• end：文本方向的终点对齐（垂直交叉轴时底边对齐）
• self-start：同 flex-start
• self-end：同 flex-end
• baseline：第一行文字基线对齐
• stretch：交叉轴方向的起点对齐，交叉轴方向未设对应宽度/高度时，占满整个交叉轴

# 网格布局

# 容器属性

# grid-template-rows

grid-template-rows: <网格行宽>#

• auto：自动
• 长度值
• 比例值
• repeat() 函数
• minmax() 函数
• [name]：网格线名称

# grid-template-columns

grid-template-columns: <网格列宽>#

• auto：自动
• 长度值
• 比例值
• repeat() 函数
• minmax() 函数
• [name]：网格线名称

# row-gap

row-gap: <网格行距>

• 长度值
• 百分值：相对于自身高度

# column-gap

column-gap: <网格列距>

• 长度值
• 百分值：相对于自身宽度

# gap

gap: <row-gap> <column-gap>?

# grid-template-areas

grid-template-areas: <网格区域>#

• 字符值

/* 相同名字连成一个区域，不需要的区域用 . 表示 */
grid-template-areas:
    "a a a"
    "b . ."
    "b c c";

# grid-auto-flow

grid-auto-flow: <网格排列方向> || <网格排列方式>

排列方向

• row：按行排 默认值
• column：按列排

排列方式

• 空：稀疏方式 默认值
• dense：稠密方式，即试图让后面的小网格去填充前面留下的空白，同时次序也会被打乱

# justify-items

justify-items: <项目在网格内水平对齐>

• normal：常规，效果同 stretch 默认值
• center：中点对齐
• left：左边对齐
• right：右边对齐
• flex-start：文本方向的起点对齐
• flex-end：文本方向的终点对齐
• start：同 flex-start
• end：同 flex-end
• self-start：同 flex-start
• self-end：同 flex-end
• stretch：同 flex-start，未设宽度时占满整个交叉轴

# align-items

align-items: <项目在网格内垂直对齐>

• normal：常规，效果同 stretch 默认值
• center：中点对齐
• flex-start：顶边对齐
• flex-end：底边对齐
• start：同 flex-start
• end：同 flex-end
• self-start：同 flex-start
• self-end：同 flex-end
• stretch：同 flex-start，未设高度时占满整个交叉轴

# justify-content

justify-content: <网格列的水平对齐>

• normal：常规，同 flex-start 默认值
• center：中点对齐
• flex-start：文本方向的起点对齐
• flex-end：文本方向的终点对齐
• start：同 flex-start
• end：同 flex-end
• left：左边对齐
• right：右边对齐
• space-between：两端对齐，中间均匀间隔
• space-around：中间均匀间隔，两端间隔距离为一半
• space-evenly：完全均匀间隔

# align-content

align-content: <网格行的垂直对齐>

• normal：第一根主轴在交叉轴方向的起点对齐，其他主轴完全均匀间隔 默认值
• center：中点对齐
• flex-start：顶边对齐
• flex-end：底边对齐
• start：同 flex-start
• end：同 flex-end
• space-between：两端对齐，中间均匀间隔
• space-around：中间均匀间隔，两端间隔距离为一半
• space-evenly：完全均匀间隔
• stretch：同 flex-start，交叉轴方向未设对应宽度/高度时，占满相应比例交叉轴

# 多列布局

# column-width

column-width: <理想列宽>

• auto：自动 默认值
• 长度值

# column-count

column-count: <理想列数>

• auto：自动 默认值
• 数值

# columns

column-width: <column-width> || <column-count>

# column-gap

column-count: <列间隔宽度>

• normal：1em 默认值
• 长度值
• 百分值：相对于自身宽度

# column-fill

column-count: <列填充>

• balance：各列之间平均分配（即高度统一）默认值
• auto：从上到下按正常分配

# column-rule-width

column-rule-width: <列间隔线宽度>

• thin ：薄
• medium ：中
• thick：厚
• 长度值

# column-rule-style

column-rule-style: <列间隔线样式>

• none：无 默认值
• solid：实线
• dashed：破折线
• dotted：圆点线
• ridge：脊线
• groove：槽线
• inset：内嵌
• outset：外凸
• double：双线

# column-rule-color

column-rule-color: <列间隔线颜色>

• 颜色值

# column-rule

column-rule: <column-rule-width> || <column-rule-style> || <column-rule-color>

# column-span

column-span: <子元素跨列>

• none：不跨列 默认值
• all：横跨所有列