布局属性

控制元素布局的属性，包括 display、position、flex、grid 等。

属性列表

下面是布局属性的完整列表，点击属性名可跳转到 MDN 文档查看详细信息。

盒模型与定位

属性名	描述	语法
display	指定元素的显示类型	display: block | inline | flex | grid | none | ...
position	指定元素的定位方式	position: static | relative | absolute | fixed | sticky
top	指定元素上边缘的位置	top: auto | <length> | <percentage>
right	指定元素右边缘的位置	right: auto | <length> | <percentage>
bottom	指定元素下边缘的位置	bottom: auto | <length> | <percentage>
left	指定元素左边缘的位置	left: auto | <length> | <percentage>
z-index	指定元素的堆叠顺序	z-index: auto | <integer>
float	指定元素的浮动方式	float: none | left | right
clear	指定元素的清除浮动方式	clear: none | left | right | both
box-sizing	指定元素的盒模型计算方式	box-sizing: content-box | border-box
width	指定元素的宽度	width: auto | <length> | <percentage>
height	指定元素的高度	height: auto | <length> | <percentage>
min-width	指定元素的最小宽度	min-width: auto | <length> | <percentage>
min-height	指定元素的最小高度	min-height: auto | <length> | <percentage>
max-width	指定元素的最大宽度	max-width: none | <length> | <percentage>
max-height	指定元素的最大高度	max-height: none | <length> | <percentage>
aspect-ratio	指定元素的宽高比	aspect-ratio: auto | <ratio>
inset	同时设置 top、right、bottom、left 属性	inset: <'top'>{1,4}

Flexbox 布局

属性名	描述	语法
flex	指定弹性项目如何增长或收缩	flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex-direction	指定弹性容器中弹性项目的排列方向	flex-direction: row | row-reverse | column | column-reverse
flex-wrap	指定弹性项目是否换行	flex-wrap: nowrap | wrap | wrap-reverse
flex-flow	flex-direction 和 flex-wrap 的简写	flex-flow: <'flex-direction'> || <'flex-wrap'>
flex-grow	指定弹性项目的增长系数	flex-grow: <number>
flex-shrink	指定弹性项目的收缩系数	flex-shrink: <number>
flex-basis	指定弹性项目的初始主轴尺寸	flex-basis: auto | <'width'>
justify-content	指定弹性项目在主轴上的对齐方式	justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly
align-items	指定弹性项目在交叉轴上的对齐方式	align-items: flex-start | flex-end | center | baseline | stretch
align-self	指定单个弹性项目在交叉轴上的对齐方式	align-self: auto | flex-start | flex-end | center | baseline | stretch
align-content	指定多行弹性项目在交叉轴上的对齐方式	align-content: flex-start | flex-end | center | space-between | space-around | stretch
order	指定弹性项目的排列顺序	order: <integer>
gap	指定弹性项目之间的间距	gap: <'row-gap'> <'column-gap'>?
row-gap	指定弹性项目之间的行间距	row-gap: normal | <length-percentage>
column-gap	指定弹性项目之间的列间距	column-gap: normal | <length-percentage>

Grid 布局

属性名	描述	语法
grid	网格布局的简写属性	grid: <'grid-template'> | <'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>? | [ auto-flow && dense? ] <'grid-auto-rows'>? / <'grid-template-columns'>
grid-template	网格模板的简写属性	grid-template: none | [ <'grid-template-rows'> / <'grid-template-columns'> ] | [ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?
grid-template-rows	指定网格的行轨道	grid-template-rows: none | <track-list> | <auto-track-list>
grid-template-columns	指定网格的列轨道	grid-template-columns: none | <track-list> | <auto-track-list>
grid-template-areas	指定网格区域的名称	grid-template-areas: none | <string>+
grid-auto-rows	指定隐式创建的行轨道的大小	grid-auto-rows: <track-size>+
grid-auto-columns	指定隐式创建的列轨道的大小	grid-auto-columns: <track-size>+
grid-auto-flow	指定自动放置项目的方式	grid-auto-flow: row | column | dense | row dense | column dense
grid-row	grid-row-start 和 grid-row-end 的简写	grid-row: <grid-line> [ / <grid-line> ]?
grid-column	grid-column-start 和 grid-column-end 的简写	grid-column: <grid-line> [ / <grid-line> ]?
grid-row-start	指定网格项的起始行位置	grid-row-start: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
grid-row-end	指定网格项的结束行位置	grid-row-end: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
grid-column-start	指定网格项的起始列位置	grid-column-start: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
grid-column-end	指定网格项的结束列位置	grid-column-end: auto | <custom-ident> | [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]
grid-area	指定网格项所在的网格区域	grid-area: <grid-line> [ / <grid-line> ]{0,3}
justify-items	指定网格项在行轴上的对齐方式	justify-items: normal | stretch | <baseline-position> | <overflow-position>? <self-position>
place-items	align-items 和 justify-items 的简写	place-items: <'align-items'> <'justify-items'>?
justify-self	指定单个网格项在行轴上的对齐方式	justify-self: auto | normal | stretch | <baseline-position> | <overflow-position>? <self-position>
place-self	align-self 和 justify-self 的简写	place-self: <'align-self'> <'justify-self'>?
place-content	align-content 和 justify-content 的简写	place-content: <'align-content'> <'justify-content'>?

多列布局

属性名	描述	语法
columns	column-width 和 column-count 的简写	columns: <'column-width'> || <'column-count'>
column-count	指定元素的列数	column-count: auto | <integer>
column-fill	指定列的填充方式	column-fill: auto | balance | balance-all
column-gap	指定列间距	column-gap: normal | <length-percentage>
column-rule	列间分隔线的简写属性	column-rule: <'column-rule-width'> || <'column-rule-style'> || <'column-rule-color'>
column-rule-color	指定列间分隔线的颜色	column-rule-color: <color>
column-rule-style	指定列间分隔线的样式	column-rule-style: none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset
column-rule-width	指定列间分隔线的宽度	column-rule-width: <length> | thin | medium | thick
column-span	指定元素是否跨列显示	column-span: none | all
column-width	指定列的宽度	column-width: auto | <length>

使用示例

/* 基本布局示例 */
.container {
  /* 弹性布局 */
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

/* 网格布局示例 */
.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 20px;
  justify-items: center;
}

/* 多列布局示例 */
.multi-column {
  columns: 3;
  column-gap: 2em;
  column-rule: 1px solid #ccc;
}

浏览器兼容性

大多数现代浏览器都支持这些布局属性。具体兼容性信息请参考各属性的 MDN 文档。

相关资源

• MDN CSS 参考
• CSS 规范
• Flexbox 完全指南
• Grid 完全指南