AI
推荐
模板社区
专题
登录
免费注册
首页
思维导图
详情
Flex 布局总结
2026-04-12 22:22:20
0
举报
分享方式
仅支持查看
AI智能生成
flexbox部分内容
其他教育
模版推荐
作者其他创作
大纲/内容
容器属性
display 属性
描述
激活flex布局
值 flex
flex-direction 属性
描述
定义子元素布局方向
值
row
水平排列
row-reverse
反向水平排列
column
垂直排列
column-reverse
反向垂直排列
justify-content 属性
描述
主轴线的对齐方式
值
center
居中
flex-start
左对齐
flex-end
右对齐
space-between
两端对齐，项目之间的间隔都相等
space-around
两端对齐，项目两侧的间隔相等
align-items 属性
描述
侧轴线的对齐方式
值
center
居中
flex-start
顶对齐
flex-end
底对齐
flex-wrap 属性
描述
用于设置伸缩容器的子元素是单行显示还是多行显示
值
nowrap
设置伸缩项目单行显示
wrap
设置伸缩项目多行显示，第一行在上方。
wrap-reverse
与 wrap 相反，第一行在下方。
align-content 属性
描述
用于设置伸缩行的对齐方式
注意
该属性对单行弹性盒子模型无效。
值
center
各行向伸缩容器的中间位置对齐
flex-start
各行向伸缩容器的起点位置对齐
flex-end
各行向伸缩容器的终点位置对齐
space-between
各行会平均分布在一行中
space-around
各行会平均分布在一行中， 两端保留一半的空间
项目属性
order 属性
描述
规定了弹性容器中的可伸缩项目在布局时的顺序
注意
order 仅仅对元素的视觉顺序产生作用，并不会影响元素的逻辑顺序。
值
数值，表示此可伸缩项目所在的次序组，默认为0。
align-self 属性
描述
设置伸缩项目自身元素在侧轴的对齐方式
注意
该属性可覆盖 align-items 属性
值
center
伸缩项目向侧轴的中间位置对齐。
flex-start
伸缩项目向侧轴的起点位置对齐。
flex-end
伸缩项目向侧轴的终点位置对齐
收藏
立即使用
Flex 布局总结
PO_Zh4aLE
职业：暂无
去主页
Collect
Get Started
车间布局
Collect
Get Started
Flex布局
Collect
Get Started
Flex布局
Collect
Get Started
flex
评论
0
条评论
下一页
图形选择
思维导图
主题
补充说明
AI生成
修改AI描述
去编辑
重新生成
提示
关闭后当前内容将不会保存，是否继续？
取消
确定
Document
